css hack

最新推荐文章于 2022-01-11 10:34:07 发布

CCLOVETT

最新推荐文章于 2022-01-11 10:34:07 发布

阅读量536

点赞数

分类专栏： css

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
　　CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对 IE浏览器。
　　类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
　　选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
　　HTML头部引用(if IE)Hack：针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

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

<!DOCTYPE html>  

<html>  

<head>  

    <title>Css Hack</title>  

    <style>  

    #test   

    {   

        width:300px;   

        height:300px;   

          

        background-color:blue;      /*firefox*/

        background-color:red\9;      /*all ie*/

        background-color:yellow\0;    /*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\0;} }  /*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>

CCLOVETT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css hack

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。　　CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对 IE浏览器。　　类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但
复制链接

扫一扫