首页 > 代码库 > CSS Hack

CSS Hack

CSS Hack:不同厂家的浏览器或者相同厂家不同版本的浏览器对于css的解析是不完全相同的,这样就导致了浏览器的页面生成的效果会不一样。CSS Hack的作用就是使得css在不同的浏览器中兼容,让不同的浏览器生成我们想要的效果的页面。(CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。)

  常用的CSS Hack方式:

      (1)注释法 (条件Hack) (2)类内属性前缀法  (属性级Hack)(3)选择器前缀法(选择符级Hack)

  (1)注释法 (条件Hack):

    语法:<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->

      注意:if条件Hack是HTML级别的(包含但不仅是CSS的Hack,可以选择任何HTML代码块)

      不同浏览器的不同条件表:

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

  (2)类内属性前缀法  (属性级Hack)

    语法:selector{<hack>?property:value<hack>?;}

     注意:尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎

             通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。

         一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

      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
_(IE6专有的hack) _color 蓝色 Y Y N Y N Y N Y N N
# #color 紫色 Y Y Y Y N Y N Y N Y

\0(“\9″ IE6/IE7/IE8/IE9/IE10都生效)

 (“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack)

color:red\0 红色 N N N N Y N Y N Y N
\9\0(只对IE9/IE10生效,是IE9/10的hack) 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

  (3)选择器前缀法(选择符级Hack)

    语法:<hack>selector{sRules}

     注意:与(2)的注意相同。

      常用的几个例子:

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

 

 

CSS Hack