css 兼容解决方案,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

IE6以及IE6以下版本可识别

仅IE7可识别

IE7以及IE7以上版本可识别

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);

}

参考文章：