CSS 忍者：安全的 CSS hacks 秘籍
|
你如何搞定 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:value9;} //IE6 & IE7 & IE8
这个一般人都知道，就不多说了。但面临的一个现实问题是， 另外，采用不同的 <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 */
当然，标准模式的 关于条件注释的参考资料：http://msdn.microsoft.com/en-us/library/ms537512.aspx （编辑：厦门网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
