什么是 Css Hack?ie6,7,8 的 hack 分别是什么?

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

CSS Hack大致有3种表现形式,属性级Hack、选择器Hack以及IE条件Hack

注意:尽可能减少对CSS Hack的使用。

原理:

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

#test       {  
        width:300px;  
        height:300px;  
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    } 
        :root #test { background-color:purple\9; }  /*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*/

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注