CSS 兼容问题

CSS常见兼容性问题总结

浏览器的兼容性问题一般是由于不一样的浏览器对不一样的代码有不一样的解析形成页面显示不统一的状况，这里的浏览器一般指IE 6,7,8,9... Google Firefox Opera Safari，但更多的状况仍是须要处理IE 6,7,8 Firefox的兼容问题。

CSS Hack

为了让浏览器达到统一的显示效果，须要针对不一样浏览器或者版本写出对应的可解析的CSS样式，因此把这个过程叫作CSS Hack

CSS Hack 主要分为三种：IE条件注释、CSS属性前缀、选择器前缀

（1）IE条件注释法，即在正常代码以外添加断定IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才会执行里边的代码。

<!--  lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->

<!-- [if IE]> 你想要执行的代码 <![endif]--> <!-- [if lt IE 8]> 你想要执行的代码 <![endif]--> <!-- [if ! IE 8]> 你想要执行的代码 <![endif]-->

（1）IE条件注释法，即在正常代码以外添加断定IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才会执行里边的代码。

/* 能够先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后能够用“_”分离出IE6 */
/* 因此能够按着优先级就能给特定的版本捎上特定颜色 */
.type{
    color: #111; /* all */
    color: #222\9; /* IE */
    *color: #333; /* IE6/IE7 */
    _color: #444; /* IE6 */
}

如下状况IE6能够识别，当属性一块儿写在{}里头时，前者确定会被后者覆盖。要使!important有效，就应置于多个{}间。

h1{color: #f00 !important; }
h1{color: #000;}
h2{color: #f00 !important; color: #000;}

<h1>test1</h1>
<h2>test2</h2>

在标准模式中：

1. “-″减号是IE6专有的hack
2. “\9″ IE6/IE7/IE8/IE9/IE10都生效
3. “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
4. “\9\0″ 只对IE9/IE10生效，是IE9/10的hack

（3）选择器前缀法，顾名思义，就是给选择器加上前缀。

• IE6可识别 *div{color:red;}
• IE7可识别 *+div{color:red;}
• @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有效 等等