我怎样才能有 IE 的特殊 CSS？答案

【问题标题】：How can I have special CSS for IE?我怎样才能有 IE 的特殊 CSS？
【发布时间】：2011-08-27 23:36:41
【问题描述】：

我想为 ie8 使用一些不同的 CSS，但只保留一个 CSS 文件。谁能告诉我最好的“黑客”是什么？是的，我知道 hack 不好，但我想至少暂时保留一个 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 { 
}

【问题讨论】：

How to write one IE conditional comment to target all IE versions at once? 的可能重复项

标签： html css internet-explorer

【解决方案1】：

Paul Irish 可以很好地解决这个问题。它涉及使用条件 cmets 在 <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/。

【讨论】：

这看起来很不错。任何人都知道如何将其与 else 结合起来：顺便说一句，这是什么代码？我不熟悉以这种方式使用代码。
我想补充一点，你不能使用类，而是整个 CSS 文件只用于特定的 IE。想法是一样的，但你不会弄乱你的普通 CSS 文件。 Take a look here
我只有一个地方我希望 CSS 有所不同，所以使用另一个文件有点矫枉过正。谢谢
@Maricel：这些是“条件 cmets”，这是一项仅限 IE 的功能，允许您使用 HTML cmets 将标记定位到某些版本的 IE 或非 IE 浏览器。没有else 语句，因此您不能将它们组合成一个条件注释。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

确保浏览器（完全）解释每个 html 元素的最佳方法是使用http://www.modernizr.com/

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

【讨论】：

【解决方案4】：

IE 上不同版本的最简单的 CSS hack 是：

.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 */

以上都是 hack，但至少它们使用 VALID CSS，除了 IE8 的 hack，我建议使用条件注释。

【讨论】：