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样式表正在覆盖Chrome样式表，即应该如此，但我遇到的问题是Chrome还会读取ie.css，这会破坏页面上某些元素的定位

我已经尝试了<!-- if !IE]>...以及这方面的一些内涵，但仍然没有任何乐趣。

我已经考虑过使用不同的名称围绕IE条件注释中的元素，但这在代码中更加混乱。

我只需要在浏览器之间隔离规则（以便在Chrome / Firefox /等中加载ie.css，在IE中加载ie.css）

谢谢，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 对我来说也是一个有效的陈述，所以我也会调用它。而且因为最后的陈述总是胜利，所以我将背景变为红色。

关键字“跨浏览器黑客攻击”

Answer 2

<强>的style.css ：

body {
   color: red;
}

<强> msie.css ：

body {
   color: blue;
}

的index.html

[...]

<link href=/css/style.css rel=stylesheet>
<!--[if IE]><link href=/css/msie.css rel=stylesheet><![endif]-->

[...]

<body>I am red in all browsers but blue in MSIE</body>

您应该遵循此示例，并牢记CSS语句的specifity。

Answer 3

尝试

<!--[if lt IE 9]>

<![endif]-->

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

3 个答案: