CSS忍者：安全的CSS hacks秘籍

通过条件判断引入样式表 使我们能很容易在 IE 浏览器中通过条件注释语句加载指定样式表，而其他非 IE 内核浏览器则自动忽略这段蹩脚的 HTML注释。下面是一个例子： 这段代码会导致 IE8、IE7、IE6 各自加载对应的样式文件。这事实上是非常牛逼的，条件注释给按浏览器加载各自不同的样式表提供了可能，但同时需要维护多个样式文件。 CSS hacks 这事实上是个龌龊的做法，能解决问题又不符合规范，看着也很头大。大部分人看着它只能束手无策而又逼不得已。现在可以来简单回顾一下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 渲染差异。建议设置默认渲染模式如下： //标准 IE 模式 那咋整呢?咋整咋整咋整?没事，下面还有更绝的。 通过条件判断插入指定类 既然可以用条件判断，那么直接为不同 IE 版本输出单独用于设定样式的钩子类好了。直接上代码： // 非 IE 浏览器的情况，不添加任何作用类 如果要是 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