最全的css hack(ie6-9、firefox、chrome、opera、safari)

发布时间:2020-06-14编辑:脚本学堂
为大家收集了最全的css hack,针对ie6-9、firefox、chrome、opera、safari等浏览的css hack,有需要的朋友参考下。

本节内容:
史上最全的Css Hack。

为适应不同浏览器不同的版本(版本主要就ie来说),ie这朵奇葩现在要兼容6-9。
在ie下可以写条件注释来区分ie和其他浏览器,以及ie的版本。

本节主要讨论css hack。

例子:
 

复制代码 代码示例:
<!DOCTYPE html> 
<html> 
<head> 
<title>Css Hack - www.jb200.com</title> 
<style> 
    #test  
    {  
        width:300px;  
        height:300px;  
         
        background-color:blue;      /*firefox*/
        background-color:red9;      /*all ie*/
        background-color:yellow;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    } 
    :root #test { background-color:purple9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
</style> 
</head> 
<body> 
    <div id="test">test</div> 
</body> 
</html>
 

测试:
将以上代码保存为xxx.html,在各浏览下测试,查看效果即可。

分析如下:
    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-width: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的。

小结:
css hack虽然可以解决个浏览器之间css显示的差异问题,但是毕竟不符合W3C规范。
平时写css最好是按照标准来,方便维护。