虚度人生

导航

以讹传讹的css hack

网上流传的css hack有一个很大的误区,就是只注重浏览器不同的版本,殊不知,不同的浏览器模式(doctype)下css hack的效果也是不一样的。(不知道不同的系统平台会不会也有影响,目前还没发现。)

这也从一个侧面反应了当下社会的共性,浮躁,大家都是网上搜下来就不管,也没有自己真正细致的去检验过。

Ok,闲言少叙,经过个人测试,总结如下:

标准模式下:

  • 只有ie6识别:_property: value,其实其他一些符号也可以达到同样效果,如-。
  • 只有ie6识别:* html selector { property: value; },并且能通过w3c验证,推荐的写法。
  • 除ie6外都能识别:property: value !important,注意,在ie6只是不能识别!important,即不能提升优先级,等效于property: value。
  • 只有ie6和ie7识别:*property: value,其实很多符号都可以,不一定是*,如+,#,^,[,],一般采用网上流行的*,有兴趣的同学可以自己测试。
  • 只有ie6,7,8识别:property: value\9。
  • 只有ie7识别:*+html selector { property: value; },并且能通过w3c验证,推荐的写法。
  • 只有ie8识别:property: value\0。
  • 只有ie6,7及safari,chrome识别:[;property: value;];,ie的话能识别[;这些前缀,加入];后缀是为了不影响之后的属性。

怪癖模式下:

  • 只有ie6识别:-property: value。
  • 只有ie6,7,8能识别:*property: value,同理,+,#之类也是如此,这里要特别注意的是,_也包括在其中,还有就是property: value\9。
  • 只有ie6,7,8能识别:* html selector { property: value; },并且能通过w3c验证,推荐的写法。
  • 除ie6,7,8外都能识别: !important。
  • 只有ie8能识别:property: value\0。
  • 只有ie6,7,8及webkit识别:[;property: value;];。

为了更直观一点,可以看下面的表格:

standard mode quirks mode
ie6 ie7 ie8 sa4 ch4 other ie6 ie7 ie8 sa4 ch4 other
_property: value y y y y
-property: value y
* html selector { property: value; } y y y y
property: value !important y y y y
*property: value y y y y y
+property: value y y y y y
property: value\9 y y y y y y
*+html selector { property: value; } y
property: value\0 y y
[;property: value;]; y y y y y y y y y

如果发现别的经过测试的hack,我也会陆续添加,随时欢迎批评指正。

css hack只是为了让我们兼容众多浏览器的一种手段,也可以结合ie的条件判断,<!--[if IE]><![endif]-->,也可以像ext一样,预先用js判断出浏览器类型,然后给body加上一个样式,class="ie7"。

我们不应该拘泥于某种方式,为了达到目的,应该不择手段。

最后,附一张网上流行的css hack表,会陆续的进行测试。

ps: 找不到原文出处,哪位同学知道的话请帮忙告知一下,


 ((      /|_/|
  \\.._.'  , ,\
  /\ | '.__ v /
 (_ .   /   "         
  ) _)._  _ /
 '.\ \|( / (
   '' ''\\狗、 \\

posted on 2010-01-27 13:36  nozer0  阅读(330)  评论(2编辑  收藏  举报