UID-CSS Hack

来源：互联网发布：mac商店编辑：程序博客网时间：2024/06/05 19:08

什么是Hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），
对CSS的支持、解析不一样，
导致在不同浏览器的环境中呈现出不一致的页面展现效果。
这时，我们为了获得统一的页面效果，
就需要针对不同的浏览器或不同版本写特定的CSS样式，
我们把这个针对不同的浏览器(或不同版本) 写相应的CSS样式的过程，叫做CSS hack!

CSS Hack 的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，
以及CSS优先级对浏览器展现效果的影响，
我们可以据此针对不同的浏览器情景来应用不同的CSS。
也就是说,
各浏览器内核对CSS代码的解析方式有所差异,
我们可以根据这种某某内核区别其他内核的差异来写只有某浏览器认识的CSS代码
也就是说,
在 CSS属性前面加个"*", IE能执行此CSS代码, 而其他浏览器会当做注释

注意

在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。
因为任何浏览器下出现渲染不一致都极有可能是
我们自己的结构或样式不符合W3C的某些要求，
或者说违背了浏览器的某些规则而造成的，
所以我们应该尽量通过修改结构或CSS 来达到各浏览器渲染效果一致，
除非到了万不得已情况下，才考虑 CSS Hack。

CSS Hack 分类

1) 属性前缀
即, 内部hack
2) 选择器前缀
3) IE条件注释

CSS Hack 书写顺序

作用范围广的放前面, 作用范围窄的放后面
也就是说大家都认识的放前面, 很少人认识的放后面 (方便覆盖)

IE条件注释

<!--[if IE]>

如果是 IE浏览器则执行

<!--[if ! IE]>

如果不是 IE浏览器则执行

<!--[if IE 7]>
如果是 IE7 则执行

<!--[if ! IE 7]>
如果不是 IE7 则执行

<!--[if gte IE 7]>
如果 IE版本大于或等 7 则执行
gte, greater than equal

<!--[if lt IE 7]>
小于
<!--[if lte IE 7]>

使用总结

1. Firefox
@-moz-document url-prefix() {
.selector {
property: value;
}
}
2. Webkit枘核浏览器
@media screen and (-webkit-min-device-pixel-ratio:0) {
Selector { property: value; }
}
3. Opera浏览器
@media all and (min-width:0) {
Selector {property: value;}
}
4. IE9浏览器
:root Selector {property: value\9;}
5. IE9以及IE9以下版本
Selector {property:value\9;}
6. IE8浏览器
@media \0screen{
Selector {property: value;}
}
7. IE8以及IE8以上的版本
Selector {property: value\0;}
8. IE7浏览器
*+html Selector{property:value;}
*:first-child+html Selector {property:value;}
9. IE7及IE7以下版本浏览器
Selector {*property: value;}
10. IE6浏览器
Selector {_property/**/:/**/value;}
Selector {_property: value;}
*html Selector {property: value;}

0 0