CSS浏览器兼容性

CSS浏览器兼容性

原因：当今时代浏览器厂商太多，而且不同厂商，甚至同一厂商不同版本的浏览器，对同一段css的解析效果也不一致，这就会导致页面的显示效果不统一，也就带来了兼容性问题；

解决思路和方案

1. 浏览器私有属性： 在某个css属性前添加一些前缀，这就是浏览器的私有属性；

   1. -moz-：Firefox(火狐)浏览器私有属性；
   2. -ms-：IE浏览器私有属性；
   3. -webkit-：chrome、safari浏览器私有属性；
   4. -o-：opera浏览器私有属性；

   注意：兼容性写法放到最前面，把标准写法放到最后；

   -webkit-transform:translate(30deg);  //谷歌浏览器
   -ms-transform:translate(30deg);  //IE浏览器
   -moz-transform:translate(30deg);  //火狐浏览器
   -o-transform:translate(30deg);  //opera浏览器
   

2. css样式初始化

   使用通配符选择器(*)对浏览器样式进行初始化，覆盖默认样式；

   *{
       padding:0;
       margin:0;
       list-style:none;
       box-sizing:border-box;
   }
   

   或是推荐使用Normalize.css库解决兼容性问题

3. CSS hack

   针对不同的浏览器甚至不同的版本编写特定的CSS样式，这一过程就叫做CSS hack，大致分为三种(条件hack、属性级hack、选择符级hack)；

   **条件hack：**主要针对IE浏览器进行一些特殊的设置

   <!--[if <keywords>? IE <version>?]>
   代码块
   <![endif]-->
   

   if后面跟的条件关键字：

   • 是否：指定是否IE或IE某个版本；空
   • 大于：选择大于指定版本的IE版本。gt（greater than）
   • 大于等于：选择大于或等于指定版本的IE版本。gte（greater than or equal）
   • 小于：选择小于指定版本的IE版本。lt（less than）
   • 小于等于：选择小于或等于指定版本的IE版本。lte（less than or equal）
   • 非指定版本：选择除指定版本之外的所有IE版本。!

   IE10以上版本已将条件注释特性移除

   ​

   **属性hack：**在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀；

   selector{<hack>?property:value<hack>?;}
   

   关键字：

   • _：选择IE6及以下。
   • *：选择IE7及以下。
   • \9：选择IE6+。
   • \0：选择IE8+和Opera15以下的浏览器。

   **选择符级hack：**是针对一些页面表现不一致或者需要特殊对待的浏览器，在css选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack；

   <hack> selector{sRules}
   

   常见的选择符级hack有：

   • *html： *前缀只对IE6生效
   • *+html: *+前缀只对IE7生效
   • @media screen\9{…}：只对IE6/7生效
   • @media \0screen ：只对IE8有效
   • @media \0screen,screen\9：只对IE6/7/8有效
   • @media screen\0 ：只对IE8/9/10有效
   • @media screen and (min-width:0\0) ：只对IE9/10有效
   • @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) ：只对IE10有效

4. 自动化插件

   Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并添加浏览器前缀到CSS内容里面；