html - 来自 Chrome-IE 兼容性的条件样式表

Question

我的 html 中有以下代码:

<link href="~/App_Themes/Default/core.css" rel="Stylesheet" />
<!--[if gte IE 7]>
    <link href="~/App_Themes/Default/ie.css" rel="Stylesheet" />
<![endif]-->

据我了解，这说明了以下内容:

到 Chrome
加载 core.css 以在该文件上使用，其余为注释，因此忽略它

到IE
加载 core.css 以在该文件上使用...哦等等，你是 IE，所以加载 ie.css 而不是

到目前为止，ie 样式表正在覆盖 ie 中的 Chrome 样式表，但我遇到的问题是 Chrome 也会读取 ie.css，这会破坏页面上某些元素的定位

我试过了 <!-- if !IE]>...和这方面的一些内涵，仍然没有快乐。

我考虑过用不同的名称包围 IE 条件注释中的元素，但这在代码中更加困惑。

我只需要隔离浏览器之间的规则(以便 ie.css 在 Chrome/Firefox/etc 中加载，而 ie.css 在 IE 中加载)

谢谢，Ortund

Answer 1

正如我在评论中提到的，您误解了条件选项。 IE7 将加载这两个文件并调用定义。对于 isolationg css 样式，您必须使用特殊名称标记类名。

举个例子:

假设有一个 css 规则:

.headless .content {background-color: yellow;}

所有浏览器都会理解这一点。如果您只想更改 IE 7 的背景，您必须按如下方式定义规则:

*:first-child+html .headless .content {background-color: red;}

它是如何工作的:

Chrome 浏览器:

.headless .content 对我来说是一个有效的声明，所以我将调用它

:first-child+html .headless .content 

对我来说是无效的陈述，所以我会忽略它。

IE7:

.headless .content 对我来说是一个有效的陈述，所以我将调用它

:first-child+html .headless .content对我来说也是一个有效的陈述，所以我将调用它。因为最后一条语句总是获胜，所以我将背景涂成红色。

它的关键字“跨浏览器黑客”