css hack
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
IE7 hack
*background-color:#dddd00; /* ie 7*/IE8 hack
background-color:red ; /* ie 8/9*/IE9 hack
background-color:blue 9 ;火狐,傲游,浏览器通用
background-color:red!important;
注意写hack的顺序,其中:
background-color:red ;IE8和IE9都支持;
background-color:blue9 ; 仅IE9支持;
另外,background-color:eeeeee9;的HACK支持IE6-IE8,但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。
IE9 和 IE8 以及其他版本的区别说明background-color:blue; 各个浏览器都认识,这里给firefox用;
background-color:red9;9所有的ie浏览器可识别;
background-color:yellow ; 是留给ie8的,最新版opera也认识,后面自有hack写了给opera认的,所以, 我们就认为是给ie8留的;
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
:root #test { background-color:purple9; } :root是给ie9的,网上流传了个版本是 :root #test { background- color:purple ;},这个,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}
@media all and (min-0px){ #test {background-color:black ;} } 这个是老是跟ie抢着认 的神奇的opera,必须加个 ,不然firefox,chrome,safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
选择符级HackCSS内部选择符级Hack
语法<hack> selector{ sRules }
说明选择不同的浏览器及版本
尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
简单列举几个:
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
内部属性HackCSS内部属性级Hack
语法:selector{<hack>?property:value<hack>?;}
取值:
_: 选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。
*:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高。
9:选择IE6+。