CSS Hacks

秦歌 — Fri, 11 Jul 2008 19:05:48 +0000

Java一直标榜一句老话叫“编写一次，到处运行(Write Once,Run Anywhere)”，CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作，虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了，仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致，但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下，可能你不得不为不同的浏览器写不同的CSS代码，这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks，但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks，即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以，下面这个我常用的CSS Hacks列表或许有些用：

	IE6	IE7	Firefox2+	Firefox3+	Opera9.5+	Safari3.1+
选择符{ *属性:值; }^[1]	√	√	×	×	×	×
选择符{ _属性:值; }	√	×^[2]	×	×	×	×
选择符,x:-moz-any-link{ 属性:值; }	×	√	√	√	×	×
选择符,x:-moz-any-link,x:default{ 属性:值; }	×	√	×	√	×	×
@media all and (min-width:0){ 选择符{属性:值;} }^[3]	×	×	×	×	√	√
@media all and (-webkit-min-device-pixel-ratio:0){ 选择符{属性:值;} }^[4]	×	×	×	×	×	√

这里有一个上述CSS Hacks的应用的例子可以看看。

[1] 此处的*号其实也可以是.号、>号、+号和#号。但它们都不属于CSS2.1规范合法属性名的一部分，所以不能通过验证。
[2] 当IE7为quriks mode时和IE6为quriks mode解析相同，所以此时这个表达式在IE7中也能生效。这个hack已经应用了很久了，下划线_作为属性名的前缀是符合CSS2.1规范语法的，但不存在于其属性名列表中，所以依旧不能通过标准语法验证。对于多个IE的CSS Hacks，条件注释是一个很值得考虑的解决方案。另外对于IE8可以关注其新功能和变化，但现在考虑其CSS Hacks问题有点过早，真的有需求可以通过增加来解决。
[3] 如果把表达式中的and和(中间的空白去掉变成@media all and(min-width:0){选择符{属性:值;}}，那么Safari3+将无法识别，Opera9.5+则可以。
[4] 这个表达式Opera9.0是支持的。

上面这些CSS Hacks仅仅是沧海一粟，是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks，更多的CSS Hacks可以看这里：

随网之舞hack

CSS Hacks