这三种分类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.添加了微软建议的<!--[if IE]><![endif]-->都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;} }