CSS兼容

一.css hack

1.条件注释法

    只在IE下生效
    <!--[if IE]>
    这段文字只在IE浏览器显示
    <![endif]-->
    
    只在IE6下生效
    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->
    
    只在IE6以上版本生效
    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->
    
    只在IE8上不生效
    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->
    
    非IE浏览器生效
    <!--[if !IE]>
    <!-->
    这段文字只在非IE浏览器显示
    <!-->
    <![endif]-->

2.属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

/* 只支持IE6、7、8、9、10 */
选择器{属性：属性值\9;}
/* 只支持IE8、9、10 */
选择器{属性：属性值\0;}
/* 支持IE8的部分属性值、完全支持IE9、10 */
选择器{属性：属性值\9\0;}
/* 仅支持IE7和IE6 */
选择器{*属性：属性值;}
/* 只支持IE6 */
选择器{_属性：属性值;}
/* 只不支持IE6 */
选择器{属性：属性值!important;}

IE浏览器各版本 CSS hack 对照表

hack    写法  实例  IE6(S)  IE6(Q)  IE7(S)  IE7(Q)  IE8(S)  IE8(Q)  IE9(S)  IE9(Q)  IE10(S) IE10(Q)
*   *color  青色  Y   Y   Y   Y   N   Y   N   Y   N   Y
+   +color  绿色  Y   Y   Y   Y   N   Y   N   Y   N   Y
-   -color  黄色  Y   Y   N   N   N   N   N   N   N   N
_   _color  蓝色  Y   Y   N   Y   N   Y   N   Y   N   N
#   #color  紫色  Y   Y   Y   Y   N   Y   N   Y   N   Y
\0  color:red\0 红色  N   N   N   N   Y   N   Y   N   Y   N
\9\0    color:red\9\0   粉色  N   N   N   N   N   N   Y   N   Y   N
!important  color:blue !important;color:green;  棕色  N   N   Y   N   Y   N   Y   N   Y   Y
说明：在标准模式中

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

3.选择器前缀法

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