__x__(48)0910第六天__CSS Hack

CSS Hack:

不到万不得已,不要使用。不易于维护。

有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行。

此时,CSS Hack 就能实现。


CSS Hack 实际上指的是一段特殊的代码,这段代码只在特定的浏览器环境下识别并执行。

 


写法:

条件Hack只对IE9及以,下的浏览器有效,其他浏览器视为注释

<!--[if <关键字>? IE <版本>?]>

 

<![end]-->

关键字:

""    是否为

"gt"    大于

"gte"    大于等于

"lt"    小于

"lte"    小于等于

"!"    不是

 


 

<!--[if IE 8]>

 <p>当前浏览器为IE8 !<p>

<![end]-->

 


 

<!--[if lte IE 7]>

<p>您的环境为IE7及以下 !</p>

<![end]-->

    <!--条件Hack-->
    <!--[if IE 6]>
        <!-- 引入外部js文件 -->
        <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
        
        <!-- 写js处理 -->
        <script type="text/javascript">
            DD_belatedPNG.fix("div,body");    // 修复div的图片显示,可以写*代替,但是会影响性能。
        </script>
    <![end]-->

属性级Hack

假设 color 属性,在 IE6 需要设置成 red,但是在其他需要设置成 blue

_样式        IE6 及以下浏览器执行。

*样式        IE7 及以下浏览器执行。

color: red\9;        IE6 及以上的浏览器执行。

color: red\0;        IE8 及以上的 或者 Oprea15以下的浏览器执行。

*{

 

}


选择符级Hack

IE6

* html body{

background-color: red;

}

 

IE7

*+html body{

background-color: red;

}

 

IE8+ 或 非IE

body:lang{

background-color: red;

}

 

IE9+ 或 非IE

body:nth-child(1){

background-color: red;

}


猜你喜欢

转载自www.cnblogs.com/tianxiaxuange/p/9621536.html