在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
简评:浏览器兼容性问题常常让人头疼,以下是避免出现这些问题的五个技巧。 1. 前缀 CSS3 样式 如果您正在使用任何类型的现代 CSS 片段,例如框尺寸(box-sizing)或背景剪辑(background-clip),请确保使用适当的前缀。 -moz- /* Firefox 和其他使用 Mozilla 浏览器引擎的浏览器 */ -webkit- /* Safari,Chrome 和其他使用了 Webkit 引擎的浏览器 */ -o- /* Opera */ -ms- /* IE 浏览器(但不总是 IE) */ 2. 使用 reset 您可以使用normalize.css,下面是我用的,来自 Genesis Framework Style Sheet。 html,body,div,span,applet,object,iframe,h1,h2, h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address, big,cite,del,dfn,em,img,ins,kbd,q,s,samp,small, strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt, dd,ol,ul,li,fieldset,form,label,legend,table,caption, tbody,tfoot,thead,tr,th,td,article,aside,canvas,details, embed,figure,figcaption,footer,header,hgroup,input,menu, nav,output,ruby,section,summary,time,mark,audio,video { border: 0; margin: 0; padding: 0; vertical-align: baseline; } 3. 避免填充宽度 当你添加宽度为一个元素的填充时,它会变得更大。宽度和填充将被加在一起。 * { -webkit-box-sizing: border-box; /* Safari/Chrome 等 WebKit 内核浏览器 */ -moz-box-sizing: border-box; /* Firefox 等 Gecko 内核浏览器 */ box-sizing: border-box; } 4. 清除 float 如果没有清除,很容易出问题。感兴趣的可以看看Chris Coyier 的这篇文章。 可以使用此 CSS 代码片段来清除: .parent-selector:after { content: ""; display: table; clear: both; } 如果你包装大部分的元素,一个非常简单的方法是将它添加到你的 wrap 类中。 .wrap:after { content: ""; display: table; clear: both; } 搞定! 5. 测试 创建您自己的跨浏览器基础架构或仅使用Endtest。 原文链接: 5 Tricks to Avoid Cross Browser Issues 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论