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有效 等等