CSS Hack

来源：互联网发布：淘宝联盟官网编辑：程序博客网时间：2024/05/20 22:00

CSS Hack由于不同的浏览器, 比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等, 对CSS的解析认识不一样, 因此会导致生成的页面效果不一样, 得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS, 让它能够同时兼容不同的浏览器, 能在不同的浏览器中也能得到我们想要的页面效果.

CSS Hack大致有3种表现形式, CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack(主要针对IE浏览器).

书写顺序，一般是将识别能力强的浏览器的CSS写在后面.

注意：由于CSS Hack不符合W3C规范, 所以非特殊情况最好不用.

1.类内部Hack

比如 IE6能识别下划线"_"和星号" * ", IE7能识别星号" * ", 但不能识别下划线"_", 而firefox两个都不能认识,等等

#demo{       width:300px;       height:300px;        background:blue;     /*firefox*/    background:red\9;    /*all ie*/    background:yellow\0; /*ie8*/    +background:pink;    /*ie7*/    _background:orange;  /*ie6*/}  :root #demo { background-color:purple\9; }  /*ie9*/@media all and (min-width:0px){ #demo {background:black\0;} }  /*opera*/@media screen and (-webkit-min-device-pixel-ratio:0){ #demo {background:gray;}  /*chrome and safari*/}

2.选择器Hack

比如 IE6能识别*html .class{}, IE7能识别*+html .class{}或者*:first-child+html .class{},等等

#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */*+html #demo {width:130px;} /*会被IE7执行*/

3.HTML头部引用(if IE)Hack

这类Hack不仅对CSS生效, 对写在判断语句里面的所有代码都会生效.

针对所有IE: <![endif]-->

针对IE6及以下版本: <![endif]-->

<head>...<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--><!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--><!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]--><!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->...</head>

4.常用CSS Hack一览表

IEFirefoxChromeSafariOpera6789* html selector {property: value}√×××××××*+html selector {property: value}×√××××××*:first-child+html selector {property: value}×√××××××:root selector {property: value}×××√××××property:value\9√√√√××××property:value\0××√√××××*property:value√√××××××_property:value√×××××××property:value!important×√××√×××@media screen and(-webkit-min-device-pixel-ratio:0){selector {property: value;}}×××××√√√@media all and (min-width:0px){selector {property: value\0;}}×××××××√