IE8的css hack

时间:2009年07月18日作者:愚人码头查看次数:30,081 views评论次数:51

首先感谢“丸子”提供的这个IE8的css hack;

关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:

.test{
color:#000000;                  /* FF,OP支持 */
color:#0000FF\9;       /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */
[color:#000000;color:#00FF00;      /* SF,CH支持 */
*color:#FFFF00;                 /* IE7支持 */
_color:#FF0000;               /* IE6支持 */
}

包括我自己也是使用这种的,这是我前段时间整理的《主流浏览器的一些CSS hack》。(转载请注明出处:WEB前端开发 http://www.css88.com/)

很多人再研究color:#0000FF\9;中的为什么IE6-IE8支持“\9”写法,和它的原理,我只是个工程师,不是科学家,我不懂为什么和它的真正原理,真的!很惭愧!

昨天在某个群里也看到部分前端工程师或网页重构师势利的一面,同样的一个解决方案,大公司有名的前端工程师或网页重构师写的东西都追捧,而小公司没名气的前端工程师或网页重构师写的解决方案却被反问:“css有这种写法吗?看来你连最基本的css的几个属性和属性值都没搞懂;就算你解决了问题你写的css也是不规范的,就是规范你跟我讲讲你解决方案的原理;”同样的一个解决方案,大公司有名的前端工程师或网页重构师写的这些反问质疑就全都没了,拼命的去研究他这个解决方案,呵呵,我觉得那些人很可笑。还有很多人问问题只有得到大公司有名的前端工程师或网页重构师的肯定回答后才放心而又开心的走了,甚至不留一句谢谢。当然没人(包括我)否认大公司有名的前端工程师或网页重构师在业界的影响力,他们为前端和重构业界做的贡献大家都是看得到的,只是觉得做人(特别是我们做技术的)不能太势利,多一点技术共享和探讨,多一点感激,学习成长才是最重要的。我承认我以前经常骂人,骂人家SB,内参国王说的对,骂人家SB就等于骂自己SB,我以前是很SB。不想探讨就看着呗,骂人是不对的!(转载请注明出处:WEB前端开发 http://www.css88.com/)

扯远了,回到IE8的CSS hack,讲讲color:#0000FF\9:

color:#0000FF\9的hack支持IE6-IE8(其他版本没有测试),但是IE8不能识别“*”和“_”的css hack,所以我们可以使用

color:#0000FF\9; ;/*ie6,ie7,ie8*/

*color:#FFFF00;/*ie7*/

_color:#FF0000;/*ie6*/

来区分IE的各个版本。

至于为什么使用“\9”我真的不清楚原因,但是“丸子”测试了其他0-13的数字,最终结果如下:

2009-07-18_125722

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;当然你如果还有耐心可以测试“\14”,“\15”,“\16”。。。

从上面测试结果我们可以看出“\0”的写法只被IE8识别,ie6,ie7都不能识别,那么“\0”应该是IE8的真正hack。主流浏览器的CSS hack这样更好一些:
(转载请注明出处:WEB前端开发 http://www.css88.com/)

.test{
color:#000000;                  /* FF,OP支持 */
color:#0000FF\0;       /* IE8支持*/
[color:#000000;color:#00FF00;      /* SF,CH支持 */
*color:#FFFF00;                 /* IE7支持 */
_color:#FF0000;              /* IE6支持 */
}

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《IE8的css hack

如果你读了我的文章,觉得有帮助: 说明
标签:,分类:html+css
40条评论
  1. 丸子留言于:2009年07月18日13:22

    码头哥太抬举偶了..哇哈哈哈哈

    [回复]

  2. 笨活儿留言于:2009年07月18日16:48

    一直不想去研究hack,何必呢。早晚被淘汰的。就算要HACK, 就足够用了。

    还不如多点时间在怎么写出结构更好的CSS上。

    至于你这篇文章额外附赠的那些问题,正是我不愿意加Q群的原因…… 乱七八糟的,也讨论不出来个什么好东西。还不如直接在blog上交流来的畅快。

    [回复]

  3. 笨活儿留言于:2009年07月18日16:49

    一直不想去研究hack,何必呢。早晚被淘汰的。就算要HACK,

    1
    <!--[if ie]-->

    就足够用了。

    还不如多点时间在怎么写出结构更好的CSS上。

    至于你这篇文章额外附赠的那些问题,正是我不愿意加Q群的原因…… 乱七八糟的,也讨论不出来个什么好东西。还不如直接在blog上交流来的畅快。

    [回复]

  4. 笨活儿留言于:2009年07月18日16:50

    囧。… 显示不了.. if ie啊,我只是想说if ie…………..

    [回复]

  5. Nightire留言于:2009年07月19日13:59

    * 和 _ 这样的方法真的有效吗?就用你这篇文章的范例我测试了一下,针对IE6和IE7的hacker,无论是在IE8的quriks模式和IE7模式之下,还是在纯IE6或IE7之下都无法显示出应该有的效果。

    我就觉得纳闷了,这两种hacker我见了无数次,但我自己从来就没成功过(* 大多有效,但也并非绝对,针对IE7,用;!important也可以),反而用下面这种方法更有效:

    .test {
    color: #000; /* FF & Opera*/
    [color: #000; color: #f00 /* Safari & Chrome */
    color: #0f0; /* IE8 – it works! */
    }

    * html .test {
    color: #00f; /* IE6 */
    }

    *+ html .test {
    color: #ff0; /* IE7 */
    }

    而且这么写可通过 CSS Valid。(IE8的hacker不知可否通过验证,没空去测试了。但是我想……有必要hack IE8吗?)

    [回复]

  6. 愚人码头留言于:2009年07月19日15:08

    * 和 _ 这样的方法无效?这是我第一次听说!

    [回复]

  7. 愚人码头留言于:2009年07月19日15:12

    有人就有江湖,有ie就有hack!

    [回复]

  8. 丸子留言于:2009年07月19日15:20

    ….那个说无效的higher能否给个实例….我想学习下…

    [回复]

  9. danke留言于:2009年07月19日19:20

    学习了!

    [回复]

  10. yxq198514留言于:2009年07月20日21:09

    IE8的css hack我拿到前端闭关群里没人理睬,在JS森林里被人深刻批判了,和笨活儿的说法一样,我不清楚他们为什么这么抵触HACK,个人觉得因为浏览器的原因,为了页面表现形式一样,不妨写下HACK,但假如一个站要写很多HACK就要反思一下了。当然JS判断浏览器也是一种不错的方法,但觉得为了几个HACK没必要用JS

    [回复]

  11. 罗里密留言于:2009年07月21日16:10

    可以用,
    并通过了验证。

    [回复]

  12. moondy留言于:2009年07月22日08:53

    据说”\9″是会被视为转义字符,在IE中被转义为一个空白字符,而非IE浏览器则不接受此形式

    [回复]

  13. 周裕波留言于:2009年07月22日22:14

    为什么还要考虑为IE8写HACK,完全没有写HACK的欲望!

    [回复]

  14. liupeng留言于:2009年07月23日10:32

    “*”和“_”是绝对可以的,”* html“和“*+ html”也可以,IE8的HACK,为什么要写呢,我看大多数网站是将IE8打回IE7模式执行的,我自己的个人博客也是这样的。

    [回复]

  15. 葉子留言于:2009年07月27日10:08

    其实做好了前面的html结构工作和央视的书写,hack一般不会需要

    [回复]

  16. Ghost留言于:2009年07月27日22:13

    看来码头受了不小的委屈,难为你了。其实你的影响力也不小啊,只是你发现了吗?

    看了这篇文章,有收获,虽然之前也测试过其它的数字,不过比较简单,没有做到全面。

    对于hack的问题,已经讨论过很多次,虽然结果并没能统一,不过少用hack还是对的。做为重构技术的范围之一,了解下hack也并没有什么不好。技术本身并无好坏之分,有分别的是使用它的人。

    [回复]

  17. 雨中无伞留言于:2009年07月29日10:37

    不是势力,而是因为大公司的前端如果这么做,肯定有原因的。不可否认,你看到别人也这么写的时候,如果不是出身名门,你是不可能去研究它写的是否有思想,或者代表着什么。码头,你着相了。顺便转你的这篇文章。

    [回复]

  18. 愚人码头留言于:2009年07月29日21:19

    我对楼上基本无语!

    [回复]

  19. secss留言于:2009年08月13日19:47

    看着你受委屈,好像我也很不高兴.可是你太喜欢骂人了!没有口德怎么混.还有你这个人太小气了!原因不解释

    [回复]

  20. 愚人码头留言于:2009年08月13日19:50

    骂人我承认,可是说我小气的人你还是第一个,谢谢!

    [回复]

  21. web Cloud留言于:2009年08月18日19:10

    万恶的浏览器啊,为什么老是高些差异啊。当然我们就应该在差异中求生存,求发展。要不都下岗回家家。CSS hack个人认为,结构明晰的WEB页面只要用的CSS属性合理,遵循W3C CSS标准,CSS HACK是完全可以抛弃之…

    [回复]

  22. 风干的果子留言于:2009年08月19日10:07

    严重支持,码头那段题外话说得太好了!

    [回复]

  23. air留言于:2009年08月20日16:43

    有些事不能避免,就像hack的存在那样。

    [回复]

  24. CY留言于:2010年01月10日12:06

    我试了一下,Opera 10.5也支持。

    [回复]

  25. o仔留言于:2010年01月30日10:11

    的写法支持ie8,但也支持3.0.1,如果修复了ie8,也可能会对Firefox3.0.1有影响。。

    [回复]

  26. time留言于:2010年03月06日15:19

    码头,*color:#FFFF00; ie6和ie7都可以支持

    [回复]

  27. 一醉留言于:2010年04月22日16:26

    #test { background-color:#F00; /* 所有浏览器都识别 */
    background-color:#0F0\9; /* 所有ie浏览器识别 */
    *background-color:#00F; /* IE6,IE7可以识别,ie8,FF浏览器不识别 */
    _background-color:#9C3; /* 仅ie6识别,其他浏览器不识别 */
    }
    这个写法我最终采用的~
    FUCK CSS HACK ,OH my god ~

    [回复]

  28. 一醉留言于:2010年06月09日14:29

    最近测试发现 FF支持 background-color:#0F0;
    疯了~

    [回复]

  29. 一醉留言于:2010年06月09日14:29

    background-color:#0F0;

    [回复]

  30. 一醉留言于:2010年06月09日14:30

    靠 屏蔽了~

    [回复]

  31. 虫游西子留言于:2010年07月21日10:48

    我做IE的兼容会用 “+”和”_”
    现在基本不用 “*” 来做IE兼容了,原因仅仅是因为WCCC通不过。

    [回复]

  32. riant留言于:2010年08月19日09:16

    如果只是为了通过标准而去较真,真的很无聊!

    个人觉得 * _ 的IE6,7 Hack 写法更方便,直观,所以一直使用。
    对于比较大的站点,就单独把 IE Hack 写到 fuck-ie.css 文件里边,然后通过if IE 来引入,w3C标准检测不到 if IE 里边的文件,于是也就心安理得的以为通过啦—– 鄙视我吧!

    [回复]

  33. 苏昊留言于:2011年02月15日13:48

    color:#000;
    color:#0F0\9;/* IE9、8、7、6 */
    color:#F0F;/* IE9、8、OP*/
    [;color:#F60;/* IE7、6、 webkit */
    *color:#00F;/* IE7、6*/
    +color:#0FF; /* IE7、6 */
    _color:#F00;/* IE6 */

    [回复]

  34. chuang留言于:2011年04月23日13:01

    IE9正式版都出来了,hack写法顺序岂不是又要变?怎么写?

    [回复]

  35. 爽爽留言于:2011年06月16日14:17

    好吧 多谢指教 万恶的css hack

    [回复]

  36. jayle留言于:2011年07月29日10:41

    好吧!楼主这是技术性文章,如果你认为你写的页面很符合规范,从头到尾,各个浏览器通吃,那就不用hack了。因为我也写过这样的页面,但是某些情况下,你不得不hack,你不能仅仅为了一个小地方的技术细节需要hack而去重构整个页面吧。这个时候 你需要里了解hack,如果你一直很牛,这时候你要犯难了。

    再说为什么IE8还要HACK呢,我就是因为IE8的一个BUG才HACK他的,IE8下 img 的 max-width 和table用到一起的时候,结果就是匪夷所思。那可能你又要问了,打回IE7不就行了。但我也要回复你,我所有页面都是按照完全兼容写的,IE8下就是IE8的外观,如果单单这个页面回到IE7,页面会有猛然的跳动感,样式肯定会有变化,这就是为什么我要Hack。我不想就为了这样一个 max-width的问题重构整合页面,或者把所有页面打回IE7。

    最后再说一个,非常同意作者的观点,技术就是技术,能实现功能或者优雅的实现功能就是好的技术。不分地位,另外,不是你不用或者当前不用的技术就是无用的技术。

    [回复]

  37. huyi0501留言于:2011年09月07日17:31

    学习了,感谢楼主啊

    [回复]

  38. kycool留言于:2011年09月28日14:37

    对码头哥的分享说声谢谢,但是这是一篇很古老的文章了,今天在OP11.51测试,发现也支持了,已经不是IE8的专有属性了,很多东西都要抛弃旧的,要重新洗牌了。

    [回复]

  39. kycool留言于:2011年09月28日14:40

    评论中的丢掉了,【也开始支持OP】;不知道是不是系统的问题

    [回复]

  40. 阿宅留言于:2011年10月19日09:32

    老大我爱你 太棒了

    [回复]

发表评论

*

*