css兼容性处理方案

css兼容性处理方案

首先是对于兼容性的理解。不同浏览器之间的兼容+同一浏览器，不同版本之间的兼容。
解决方案主要有以下四种：

1 浏览器CSS样式初始化

对padding和margin，以及line-height等在全局初始化，统一不同浏览器之间的差异。
举例：

* {
  margin: 0;
  padding: 0;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

2 浏览器私有属性

通常会在某个CSS的属性前添加一些前缀，比如:

• -webkit-代表chrome,safari
• -moz-代表firefox
• -ms-代表IE
• -o-代表opera

举例：

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

3 CSS hack

有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。

CSS hack的写法大致归纳为3种：条件hack、属性级hack、选择符级hack。

3.1 条件hack

<!--[if !IE ]>
除IE外其他浏览器
<![endif]-->

<!-–[if lt IE 6]>
IE6以及IE6以下版本可识别
<![endif]-–>

<!–-[if IE 7]>
仅IE7可识别
<![endif]-–>

<!–-[if gte IE 7]>
IE7以及IE7以上版本可识别
<![endif]–->

3.2 属性级hack

• _：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
• *：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
• 9：选择IE6+
• 0：选择IE8+和Opera15以下的浏览器

举例：如在不同的IE浏览器中设置不同的颜色，注意顺序：低版本的兼容性写法放到最后。

.test {
  color: #090\9; /* For IE8+ */
  *color: #f00; /* For IE7 and earlier */    
  _color: #ff0; /* For IE6 and earlier */
}

3.3 选择符级hack

• *html *前缀只对IE6生效
• *+html *+前缀只对IE7生效
• @media screen\9{...}只对IE6/7生效
• @media \0screen {body { background: red; }}只对IE8有效
• @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
• @media screen\0 {body { background: green; }} 只对IE8/9/10有效
• @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
• @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

举例：

* html .test { color: #090; } /* For IE6 and earlier */
* + html .test { color: #ff0; } /* For IE7 */

4 自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixe添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。

//我们编写的代码
div {
  transform: rotate(30deg);
}
//自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置
div {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg);
}

---

参考文章：

CSS浏览器兼容性的4个解决方案