CSS Hack 总结大全

2020-03-24 18:46:30

字体：大中小

来源：转载

供稿：网友

浏览器越来越多，不同的浏览器，不同的版本在页面的渲染上都各不相同。这让网页开发人员很头疼，为了能兼容各个浏览器，人们挖掘出了很多 CSS Hack。下面进行一下总结，如果还有其他的 CSS Hack 欢迎提供。
一) 针对 IE 的 Hack大部分 CSS Hack 都是针对 IE 的，这是用于我们的 IE “坚强”所致，尤其是 IE6。#test {
color:red; /*所有浏览器*/
+color:blue; /*所有 IE */
_color:green; /*IE 6及以下*/
_color /**/:pink; /*IE 5*/
}
由于 CSS 是后面的覆盖前面的。所以以上 CSS 分别对应非IE，IE7,8，IE6，IE5。以上 Hack 基本可以满足需求。
不过 IE 还有一些其他的 Hack。
/9 Hack:#test {
color:red; /*所有浏览器*/
+color:blue/9; /*IE 5 以上*/
}在属性后面加个 “/9″ 就可以了。你可能会奇怪：其他的数字不行吗？我试了下，好像是不行，不过 9 前面可以加几个 0。我觉得这个不必深究，能用就行了。
* html Hack:#test { /*所有浏览器*/
color:red;
}
* html #test { /*IE 6及以下*/
color:blue;
}这个 Hack 用于区分 IE6 和其他浏览器。在 CSS 属性比较多的情况下比较有用。值得一提的是，这个 Hack 是符合标准的。
[xmlns] Hack:刚刚的 “* html” Hack 是 IE6及以下支持，其他浏览器不支持。 “[xmlns]” Hack 刚好相反。[xmlns] #test { /*IE 6及以下不支持*/
color:green;
}注意：这个 Hack 要求HTML 必须要有 !DOCTYPE 头部以及 html 有xmlns属性才会起作用。不过这个问题似乎不大，现在绝大部分网页都有这两个东东，包括 Dreamweaver 默认新建的网页都会自动加上
Mac 下 IE Hack:/*/*//*/
#test {
color:blue;
}
/**/二) 针对 Gecko(Firefox, Netscape) 的 Hack@-moz-document url-prefix(){
#test {
color:yellow;
}
}包含在 @-moz-document url-prefix(){} 之间的 CSS 只有 Gecko 内核的浏览器才会支持。所以对于 Firefox 可以用这个 Hack。
三) 针对 KHTML(Chrome, Safari), Opera 的 Hack@media screen and (-webkit-min-device-pixel-ratio:0) {
#test {
color:blue;
}
}Chrome, Safari, Opera 支持以上代码，而其他浏览器不支持。
四) 针对 Opera 的 Hack
第一种方法@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#test {
color:#99ff99;
}
}包含在 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {} 之间的 CSS 只有 Opera 才能解析。
第二种方法body:empty #test {
color:yellow;
}以上 Hack 基本能区别大部分浏览器。不过我觉得 Hack 能不用最好还是别用，除非非用不可。因为 Hack 太多，管理起来也是个麻烦事。如果就差几个像素也没什么。对于一些市场占有率很小的浏览器只要做到不乱，功能可用就可以了。我们需要的是在主流浏览器中达到最好效果
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS层叠样式主次顺序

下一篇：XHTML+CSS写出正规的BLOG