CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。
| Windows | Mac OS X | Macintosh | Other | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| IE | Mz | Ns | Op | iC | IE | Mz | Ns | Om | Op | Sf | IE | Mz | Ns | Op | Ko | ||||||||||||||||||
| 7 | 6 | 5.5 | 5 | 4 | 1 | 7 | 6 | 4 | 8 | 7 | 6 | 5 | 2 | 5 | 1 | 7 | 6 | 4 | 8 | 7 | 6 | 5 | 2 | 5 | 4 | 1 | 7 | 6 | 4 | 6 | 5 | 3 | |
| 7 | 6 | 5.5 | 5 | 4 | 1 | 7 | 6 | 4 | 8 | 7 | 6 | 5 | 2 | 5 | 1 | 7 | 6 | 4 | 8 | 7 | 6 | 5 | 2 | 5 | 4 | 1 | 7 | 6 | 4 | 6 | 5 | 3 | |
| IE | Mz | Ns | Op | iC | IE | Mz | Ns | Om | Op | Sf | IE | Mz | Ns | Op | Ko | ||||||||||||||||||
| Windows | Mac OS X | Macintosh | Other | ||||||||||||||||||||||||||||||
voice-family:"\"}\"";
|
Y | Y | N | N | N | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
p\roperty:value;
|
Y | Y | N | N | N | Y | Y | Y | N | Y | Y | Y | N | N | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | N | Y | Y | Y | N | Y | N | N |
/*/*/property:value;/* */ |
Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
/*/*//*/property:value;/* */ |
N | N | N | N | N | N | N | N | Y | N | N | N | Y | N | N | N | N | N | N | N | N | N | Y | N | N | N | N | N | N | Y | N | Y | N |
div#test
|
Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
head:first-child+body div |
Y | N | N | N | N | Y | Y | Y | N | Y | Y | N | N | N | Y | Y | Y | Y | N | Y | Y | N | N | Y | Y | N | Y | Y | Y | N | N | N | Y |
body>div
|
Y | N | N | N | N | Y | Y | Y | N | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
html[xmlns] div |
Y | N | N | N | N | Y | Y | Y | N | Y | Y | Y | Y | N | N | Y | Y | Y | N | Y | Y | Y | Y | Y | N | N | Y | Y | Y | N | Y | Y | Y |
@import
'styles.css' |
Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | N | Y | Y | Y | N | Y | Y | Y |
@import
"styles.css" |
Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
@import
url(styles.css) |
Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
@import
url('styles.css') |
Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | N | Y | Y | Y | N | Y | Y | Y |
@import
url("styles.css") |
Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
@import
"null?\"\{"; |
Y | Y | Y | N | N | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
@media all{/*
rules */} |
Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y | Y | N | N | Y | Y | Y | N | Y | Y | Y | Y | Y | N | N | Y | Y | Y | N | Y | Y | Y |
<link media="all"> |
Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
<link media="All"> |
Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
* html div
|
N | Y | Y | Y | Y | N | N | N | N | N | N | N | N | N | Y | N | N | N | N | N | N | N | N | N | Y | Y | N | N | N | N | N | N | N |
*+html div
|
Y | N | N | Y | ? | N | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? |
i{content:"\"/*"}
|
Y | Y | N | N | N | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | N |
/* \*/ |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y |
html*#test
|
Y | Y | Y | N | N | Y | Y | Y | N | N | N | N | N | N | Y | Y | Y | Y | N | N | N | N | Y | Y | Y | N | Y | Y | Y | N | ? | Y | N |
_property:value
|
N | Y | Y | Y | Y | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | Y | Y | N | N | N | N | N | N | N |
*property:value
|
Y | Y | Y | Y | ? | N | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? |
@media tty {
|
N | N | Y | Y | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N |
@media tty { |
N | N | N | Y | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N |
@media tty { |
N | N | Y | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N | N |
/*\*//*/ |
N | N | N | N | N | N | N | N | N | N | N | N | N | N | Y | N | N | N | N | N | N | N | N | N | Y | N | N | N | N | N | N | N | N |
注:不是迫不得已,应该尽量不要使用css hack,因为它的向前兼容是未知的。好的办法是学好web标准设计,从根本上进行进行兼容性设计。