css hack[ie6-9,firefox,chrome,opera,safari]写法

最新推荐文章于 2024-05-20 19:19:30 发布

gxrmbi

最新推荐文章于 2024-05-20 19:19:30 发布

阅读量495

点赞数

分类专栏： Css技巧文章标签： ie9 ie8 chrome safari css

本文链接：https://blog.csdn.net/gxrmbi/article/details/22038757

版权

Css技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
<title>Css Hack_主流浏览器写法</title>  
<style type="text/css">  
#dome   
{   
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 #dome { background-color:purple\9; }  /*ie9*/
@media all and (min-width:0px){ #dome {background-color:black\0;} }  /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #dome {background-color:gray;} }  /*chrome and safari*/
</style>  
</head>  
<body>  
<div id="dome">Css Hack_主流浏览器写法</div>  
</body>  
</html>

    分析：
    background-color:blue; 各个浏览器都认识，这里给firefox用；
    background-color:red\9;\9所有的ie浏览器可识别；
    background-color:yellow\0; \0 是留给ie8的，同时最新版opera也认识。不过opera有专门写法，\0专给ie8；
    +background-color:pink; + ie7；
    _background-color:orange; _专门ie6；
    :root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
    @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }浏览器chrome和safari。

gxrmbi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css hack[ie6-9,firefox,chrome,opera,safari]写法

Css Hack_主流浏览器写法 #dome { width:300px; height:300px; background-color:blue; /*firefox*/background-color:red\9; /*all ie*/background-color:yellow\0; /*ie8*/+bac
复制链接

扫一扫