芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
32

CSS 忍者:安全的 CSS hacks 秘籍

作者 芒果/分类 代码/发布于 2011-06-19 16:59

你如何搞定 IE 这只难以驯服的怪兽?使用 CSS Hacks 或者条件注释么?恐怕没有什么解决方案是完美的。每个设计师或者前端码农都会有自己打败 IE 行之有效的方法。所有这些技术都各有利弊,让我们一起来看看。

通过条件判断引入样式表

使我们能很容易在 IE 浏览器中通过条件注释语句加载指定样式表,而其他非 IE 内核浏览器则自动忽略这段蹩脚的 HTML 注释。下面是一个例子:

<!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="ie6.css"><![endif]-->

这段代码会导致 IE8、IE7、IE6 各自加载对应的样式文件。这事实上是非常牛逼的,条件注释给按浏览器加载各自不同的样式表提供了可能,但同时需要维护多个样式文件。

CSS hacks

这事实上是个龌龊的做法,能解决问题又不符合规范,看着也很头大。大部分人看着它只能束手无策而又逼不得已。之前的《CSS Hacks for IE,IE 也可以很完美》已经谈过 IE 的 CSS hacks 了。现在可以来简单回顾一下常用的几个方法:

_selector{property:value;} //IE6
*selector{property:value;} //IE6 & IE7
selector{property:value\9;} //IE6 & IE7 & IE8

这个一般人都知道,就不多说了。但面临的一个现实问题是,\9 这个 hack 不只是针对 IE8 以及更老版本奏效,IE9 最终的发行版依旧会受到这个 hack 的影响。而 IE9 本身在 CSS 上的各种缺陷又是被修复的。如果将来 IE10、IE11 来了,那又怎么办?显然 \9 并不是一个严谨的安全的方案。

另外,采用不同的 X-UA-Compatible 模式也会影响不同版本的 IE 渲染差异。建议设置默认渲染模式如下:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">//标准 IE 模式

那咋整呢?咋整咋整咋整?没事,下面还有更绝的。

通过条件判断插入指定类

既然可以用条件判断,那么直接为不同 IE 版本输出单独用于设定样式的钩子类好了。直接上代码:

<!--[if !IE]><html><![endif]--> // 非 IE 浏览器的情况,不添加任何作用类
<!--[if IE 6]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->

如果要是 IE9、IE10 再想出现什么神奇的行为艺术的话,继续添加指定作用类就行咯。并且你的样式表也会变得异常干净、整洁、美观:

.selector { color: black; }
.ie8 .selector { color: green; } /* IE8 */
.ie7 .selector { color: blue; } /* IE7 */
.ie6 .selector { color: red; } /* IE6 */

当然,标准模式的 X-UA-Compatible 声明还是必须的,以防页面被强制按照低版本的 IE 来渲染。

关于条件注释的参考资料:http://msdn.microsoft.com/en-us/library/ms537512.aspx

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-ninja-safe-css-hacks/" title="CSS 忍者:安全的 CSS hacks 秘籍" rel="bookmark">CSS 忍者:安全的 CSS hacks 秘籍 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 32 条群众意见

  1. Kars /2011-06-19 21:00

    我去、放弃IE了! 回应

    #1
  2. 万戈 /2011-06-20 01:01

    除了条件注释,有对IE9更好的CSS HACK方法吗? 回应

    #2
  3. 芒果万戈/2011-06-20 01:22

    目前还木有发现~ 回应

    #3
  4. 万戈芒果/2011-06-20 01:26

    有说用:root的方法,不过经测试无效。。。 回应

    #4
  5. 芒果万戈/2011-06-20 01:31

    非常规 hack 一律无视,说不准出什么问题~ 回应

    #5
  6. banruosheng /2011-06-20 09:13

    通过条件判断插入指定类是个很好的方法,但是带来另外一个潜在的隐患:如果在doctype声明起1024个字节内没有出现chaset的编码声明,会带来解析的错误,插入类的数目是越少越好。 回应

    #6
  7. Sivan万戈/2011-06-20 09:55

    条件注释也可以支持IE9啊。http://lightcss.com/best-way-to-different-browser-for-css/ 回应

    #7
  8. Sivan /2011-06-20 09:56

    X-UA-Compatible还可以加上chrome=1强制用chrome frame,不过国内貌似装它的不多啊、 回应

    #8
  9. 芒果Sivan/2011-06-20 10:47

    条件注释 IE9 是可以啊,让人担心的是 CSS hack 问题。 回应

    #9
  10. 芒果banruosheng/2011-06-20 10:49

    一般也不会超过这个限制,如果实在不行,直接在 body 元素上判断? 回应

    #10
  11. Sivan /2011-06-20 12:15

    #element {
    color:black;
    }
    #element {
    *color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */
    }
    #element {
    _color: red; /* IE6 */
    }
    #element {
    color: green /; /* IE8+9 */
    }
    @media all and (min-width:0) {
    #element { color:pink /; } /* IE9 */
    }

    未经测试=。=~ 回应

    #11
  12. SivanSivan/2011-06-20 12:16

    green和pink后面是“ /; ” 回应

    #12
  13. Sivan /2011-06-20 12:17

    悲剧,发不出。就是 左斜0右斜 回应

    #13
  14. 芒果Sivan/2011-06-20 12:33

    你说的应该是 \ 0 吧?在 IE9 出来前,它是 IE8 专属的,现在 IE9 也认。这就悲剧了。 回应

    #14
  15. 花花公主 /2011-06-20 16:08

    学习了,大芒果! 回应

    #15
  16. Sivan /2011-06-20 16:14

    \ 0是89都支持,后面pink那个是在@media里用 \ 0/。。我也是以前看到存的,没试过还、 回应

    #16
  17. 夏天用什么护肤品好 /2011-06-21 18:27

    鄙视IE~~用firefox是个不错的选择 回应

    #17
  18. 笔记本网址导航 /2011-06-22 00:02

    兼容性 – 真是个老生常谈的问题。这是篇好文章,触类旁通! 回应

    #18
  19. /2011-06-22 10:23

    对于有简洁强迫症的前端来说,用条件注释来为html加class并不优雅。事实上像web qq,解决方法是这样的,用一段js动态地实现上面功能,并且能提供更多的信息class=” webkit chrome win js”,参考http://rafael.adm.br/css_browser_selector/ 回应

    #19
  20. 芒果/2011-06-22 10:27

    如果不开启脚本的情况呢? 回应

    #20
  21. 芒果/2011-06-22 10:29

    不过话说回来,对于交互复杂而不得不依赖脚本的页面而言,使用 JS 动态添加类也不失为最佳实践。 回应

    #21
  22. 芒果/2011-06-22 10:47

    如果不开启脚本,那么我觉得他基本是在自虐。而这样的人很少很少,他们不是网站的主体用户,当然有某些喜欢纯文本浏览器的高端用户。这种考虑到现在基本可以忽略了。 回应

    #22
  23. midychen /2011-06-22 16:23

    建议尽量不要用hack,迫不得已本人用
    _selector{property:value;} //IE6
    *selector{property:value;} //IE6 & IE7 回应

    #23
  24. 言冬 /2011-06-23 16:45

    直接用PHP判断浏览器属性,然后输出不同的CSS,可行性怎么样?大站貌似这样做不怎么好吧…. 回应

    #24
  25. 芒果言冬/2011-06-23 17:57

    我觉得输出不同的 class 名称比较可行,PHP 判断 UserAgent 类型并输出 CSS 选择器。 回应

    #25
  26. 言冬芒果/2011-06-23 18:34

    感觉输出不同CSS的判断比较少,输出不同的 class 名称到返回的页面应该判断增多了吧,加重负担,呵呵 回应

    #26
  27. 颈椎保健枕 /2011-06-25 14:47

    太高深了,看来还得加强学习啊。 回应

    #27
  28. sky3310 /2011-07-07 14:47

    太帅了。受益匪浅啊 回应

    #28
  29. mocob /2011-07-20 16:41

    如果按照文中的写法,可能你会发现,用Maxthon的就会杯具掉……
    [if ie 6]可以支持更多写法的。 回应

    #29
  30. 记忆枕 /2011-09-20 20:30

    看不太明白~~我是基本不用IE的。—_—! 回应

    #30
  31. 飞龙 /2011-11-14 17:55

    感觉用php判断ie客户端版本,然后调用 iefix6.css iefix7.css or iefix8.css, That is clean and my idea 回应

    #31
  32. 蜗牛 /2011-12-14 13:18

    都高手玩的。。只看。。 回应

    #32

下面我简单说几句