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的应用的例子可以看看。
上面这些CSS Hacks仅仅是沧海一粟,是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks,更多的CSS Hacks可以看这里:
请稍等,评论加载中...