[分享]css不同浏览器的兼容性问题

CSS（Cascading Style Sheets）是网页的样式语言，它能够控制网页的外观和布局。但是在不同的浏览器中，使用CSS存在一些兼容性问题。样式兼容问题： fontweight: bold...

CSS（Cascading Style Sheets）是网页的样式语言，它能够控制网页的外观和布局。但是在不同的浏览器中，使用CSS存在一些兼容性问题。

样式兼容问题：
font-weight: bold;    /* Chrome, Safari, Opera */
font-weight: 700;     /* Firefox */ 

对于上面的代码，不同的浏览器标识‘bolder’或者‘bold’的大小是不同的，更好的做法是使用数字标明大小。

选择器兼容问题：
input::-webkit-input-placeholder    /* Chrome, Safari and Opera */
input::-moz-placeholder             /* Firefox 19+ */
input:-ms-input-placeholder        /* IE */ 

如上所示，input元素显示placeholder在不同的浏览器采用的选择器是不同的，需要在样式中加入多个选择器。

样式表继承兼容问题：
-webkit-box-orient: horizontal;   /* Chrome, Safari, iOS-webkit */
-webkit-box-orient: vertical;     /* Android, iOS-webkit */ 

不同浏览器对于样式表继承的方式有所不同，可以通过为不同的浏览器设置不同的样式做到兼容。

兼容检测：
if(navigator.userAgent.indexOf('MSIE 8.0') != -1) {
    /* for IE8 */
} else {
    /* not IE8 */
} 

最后提供一个检测不同浏览器解决CSS问题的方法，检测用户使用的浏览器类型，进行差异化处理。