如何为IE设置特殊的CSS?

时间:2011-05-18 11:23:59

标签: html css internet-explorer

我想为ie8使用一些不同的CSS,但只保留一个CSS文件。谁能告诉我这个最好的“黑客”是什么?是的,我知道黑客不好,但我想保留一个CSS文件,至少目前。

例如,在非IE8浏览器中,我希望浏览器看到这个:

div.content_header_heading { 
    background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 35%, #eeeeee 65%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(35%,#eeeeee), color-stop(65%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* IE10+ */
}

但如果浏览器是IE8,我希望浏览器看到这个:

div.content_header_heading { 
}

4 个答案:

答案 0 :(得分:19)

Paul Irish可以很好地解决这个问题。它涉及使用条件注释在<html>标记上放置类:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

然后你可以使用CSS规则来定位IE版本:

.ie8 div.content_header_heading { 
}

请参阅http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

答案 1 :(得分:1)

我遇到的最好方法是为Internet Explorer使用不同的CSS文件。

然后,在您的HTML中,您可以使用在互联网上找到的典型条件代码块来排除或包含它们。

<!--[if IE 6]>
  CSS HERE
<![endif]-->

只放入那些需要在IE版本中有所不同的CSS行。

答案 2 :(得分:1)

确保浏览器(根本)解释每个html元素的最佳方法是使用http://www.modernizr.com/

如果你想使用页眉,页脚或其他新的html5元素,modernizr将创建它们,以便旧浏览器理解这些元素。

答案 3 :(得分:1)

IE上不同版本的最简单的CSS攻击是:

.color {color: #777;} /* for all browsers */
* html .color {color: #C39;} /* for IE6 */
*+html .color {color: #66F;} /* for IE7 (you can also use the long expresion " *:first-child+html ") */
.color {color: #0FC\0/;} /* for IE8, going last */

上述所有内容都是黑客攻击,但至少他们使用的是VALID CSS,除了IE8的黑客攻击,我推荐使用条件注释。