浏览器兼容性问题着实让人头疼,从最初的IE6浏览器到现在HTML5+CSS3的兴起,依然会存在兼容性问题,这里分享几个小技巧来避免这个问题。
CSS3风格的前缀
如果你正在使用最新的 CSS 代码,比如box-sizing,或者background-clip等,确保你使用了合适的供应商前缀。
使用样式重置
大家可以从网上下载写好的样式模板,也可以自己去写,当然建议下载一个完整版,自行保存,这样每次使用的时候可以直接拿来。
避免padding和width一起使用
当你给一个包含 width 的元素加 padding,那它实际显示的要比本应显示的大。因为 width 和 padding 会加到一起。比如一个元素 width 是 100px,又给它加了一个 10px 的 padding。那某些浏览器会将该元素显示成 120px。
为了解决这个问题,可以用如下代码:
清除浮动
在写页面的时候要确保我们把浮动都清理掉了,如果不清理掉,可能会出现很奇怪的情况。
可以用下面 CSS 代码清理浮动:
如果要把你大部分代码都包起来,有个更简单的方法就是把它添加到我们的 wrap 类里面:
这样的话浮动就没清理掉了,想学习更多案例效果的小伙伴可以加我Q群:142991222,一起探索更多前端干货。
掌握这几个小技巧,让它成为日常开发的习惯,会避免90%的跨浏览器不兼容问题,拿走不谢。