4个技巧避免不必要的浏览器兼容性问题

浏览器兼容性问题着实让人头疼，从最初的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%的跨浏览器不兼容问题，拿走不谢。