在以前，浏览器有很多很多，并且各个浏览器互相竞争，都互相开发新功能，很多也不按照 W3C 的标准来，这就导致了很严重的兼容性问题，最典型的莫过于兼容 IE 浏览器。而且官方标准也是一直在更新的，同时用户浏览器版本是不可知的，比如用户的浏览器可能由于版本老旧，并不支持一些新功能，但我这个网页使用了这样的新属性，就会导致兼容性问题。
读者可能会见过一些 CSS 中带有 -webkit- 前缀的属性。这其实就是由于市场竞争导致的兼容性问题。例如 box-sizing 这个属性，在一些老旧的 chrome 中，可能要求你写成 -webkit-box-sizing，因为在这些 chrome 版本发行的时候，标准并没有发布，或者还处于草案阶段，但是像 chrome 开发出了这种很好用的属性，但这个属性并不是标准中的属性，其他浏览器并不能支持，所以就必须加上 -webkit-，表示这是我 webkit 内核私有的属性，这个前缀就叫做厂商前缀，表示这个属性不是标准属性，也就是说，厂商前缀就是在一个并不是标准的属性被部分浏览器支持之后，用于区分标准属性和非标准属性的一种方式。
常见的厂商前缀如下：
- IE:-ms-
- Chrome, Safari:-webkit-
- Opera:-o-
- Firefox:-moz-
对于一些兼容性不好的属性，比如一些 CSS 3 的属性，为了获得更好的兼容性，可以像下面一样多写几个加上了厂商前缀的属性。
css
div{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
}不用担心其他前缀无法识别的问题，对于无法识别的 CSS 属性，浏览器会直接忽视。
可使用 autoprefixer 插件自动添加厂商前缀。
CSShack 可是用于解决 IE 浏览器的兼容问题的手段，分为特殊符号和条件判断两个部分。
特殊符号
- 属性前加
*，用于兼容 IE5，IE6，IE7 - 属性前加
_，用于兼容 IE5，IE6 - 在属性值后面添加
\9，用于兼容 IE5 到 IE10 - 在属性值后面添加
\0，用于兼容 IE 8 到 IE 11 - 在属性值后面添加
\9\0，用于兼容 IE 9 到 IE 10
条件判断
html
<p>
如果不是IE，显示这个P元素
</p>为了解决兼容性问题，我们有两种思路，分别是渐进增强和优雅降级。
- 渐进增强：先适应大部分浏览器，针对新版浏览器添加新样式。尽量避免书写有兼容性问题的代码，再逐步加入新标准的代码。
- 优雅降级：先制作完整的功能，再针对旧版浏览器进行特殊处理。先不用特别在意兼容性问题，完成整个功能之后，再针对低版本浏览器处理。
CSS 兼容性问题可以参考：Can I use... Support tables for HTML5, CSS3, etc