以hack实现ie版本的浏览器兼容

《以hack实现ie版本的浏览器兼容》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、各浏览器之间#element{    color:orange;/*all浏览器*/}#element{    *color:white;   /*IE6+7,doesn'tworkinIE8/9asIE7*/}#element{    _color:red;    /*IE6*/}#element{    color:green/IE8+9;/*IE8+9 */}:root#element{color:pink/IE9;} /* IE9*/[color:#000000;color:#00FF00;     /*SF,CH支持*/由于各自的识别符有

2、存在交集问题，因此如果存在交集的识别符的话，要放在前面，而不存在交集的识别符要放在后面！以上顺序为select{background-color:red;background-color:red/IE8+9;/*ie8/9*/background-color:blue9;background-color:blue/IE9;/*ie9*/*background-color:#dddd00;/*ie7*/_background-color:#CDCDCD;/*ie6*/}或者单独为IE9浏览器建立CSS:root#element{color:

3、pink/IE9;} /* IE9*//*所有IE浏览器(ie6+)支持；但是IE8不能识别“*”和“_”的csshack；所以我们可以这样写hack*/IE下，权限顺序依次为IE9

4、;IE8支持;*color:#FFFF00;IE6IE7支持;_color:#FF0000;IE6支持;这样写的话，浏览器辨识如下#hack{color:#0000FF9;IE9下color;color:#0000FF;IE8下color;*color:#FFFF00;IE7下color;_color:#FF0000;IE6下color;}“这样写必须有顺序”#element{color:green/IE8+9;/*IE8+9*/}:root#element{color:pink/IE9;}/*IE9*/color:#f00!importan

5、t;IE7FireFox支持；*color:#f00!important;仅仅只有IE7支持；_color:#f009;仅仅只有IE6支持；color:#f00;仅仅只有IE8支持；浏览器专属css的HACK使用CSS解析器Hacks区分IE虽说IE条件注释十分简单好用，但是如果你想把全部的CSS放到一个文件里的话，那么你不得不使用别的方法。注意这里的IE7Hack将只对IE7有效，因为IE6根本不知道>选择符。同时你也得注意>选择符对于其他浏览器同样是无效的。/*IE7*/html>body#ie7{*display:block;} /*IE6*/

6、body#ie6{_display:block;}CSSHack区分Firefox第一个使用了body:empty来区分Firefox1和2。第二个hack使用了全部Firefox浏览器的专有扩展-moz。-moz只对Firefox有效，使用这个Hack大可不必担心其他浏览器的影响。/*Firefox1-2*/body:empty#firefox12{display:block;} /*Firefox*/@-moz-documenturl-prefix(){#firefox{display:block;}}CSSHack区分SafariSafari的CSS

7、hack与Firefox的hack看起来很像，使用的是Safari浏览器的专有扩展-webkit且只对Safari浏览器有效。/*Safari*/@mediascreenand(-webkit-min-device-pixel-ratio:0){#safari{display:block;}}CSSHack区分Opera/*Opera*/@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body#opera{

8、display:block;}}然后，全部合在一起便是