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

来源：互联网发布：informatica windows 编辑：程序博客网时间：2024/05/22 03:20

这三种分类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;} }

0 0

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

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