为ie和chrome FF单独设置样式的“条件注释法”、“类内属性前缀法”、“选择器前缀法”、实现方法案例(推荐)

最新推荐文章于 2022-10-11 20:14:23 发布

GoodShot

最新推荐文章于 2022-10-11 20:14:23 发布

阅读量4k

点赞数

分类专栏： css web页面设计文章标签： ie chrome css 案例

web页面设计同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

这三种分类hack css详细原理，参考：http://blog.csdn.net/goodshot/article/details/44309055

1.为ie和chrome单独设置样式的类实现案例（选择器前缀法的 css hack）：

<html>
<head>
<style>
.closeImg{   
cursor:pointer;   
position:absolute; 
  
left:19px;   
right:0px\9;//这是ie的样式 （3.类内属性前缀法）  
bottom:55px;   
display:block;
height:100px;
width:100px;
background-color:blue;   
}   
@media screen and (-webkit-min-device-pixel-ratio:0){.closeImg{right:300px;height:100px;
width:200px;
background-color:Olive;   } } 
</style>
</head>
<body>
<div class="closeImg"></div>
</body>
</html>

2.添加了微软建议的都hack css注入的案例（条件注释法）：

<html>
<head>
<style>
<!--[if IE]><![endif]-->
.closeImg
{
  width:100px;
  height:200px;
  background-color:blue;
}



</style>
</head>
<body>
<div class="closeImg"></div>
</body>
</html>

针对Chrome和Safari等Webkit核心浏览器的CSS hack代码：

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核兼容CSS */ }

示例：

@media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} }

针对Firefox浏览器的写法：

/*Firefox*/ @-moz-document url-prefix() { .font1 {color:red} }

针对Opera浏览器的写法：

/*Opera*/ @media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }

GoodShot

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
为ie和chrome FF单独设置样式的“条件注释法”、“类内属性前缀法”、“选择器前缀法”、实现方法案例(推荐)

.closeImg{ cursor:pointer; position:absolute; right:9px; right:0px\9;//这是ie的样式 bottom:55px; display:none } @media screen and (-webkit-min-device-pixel-ratio:0){.closeImg{right:0px;} }
复制链接

扫一扫