0

我在使用 Internet Explorer 时遇到了问题，当然它在其他浏览器中也能正常工作。所以我有一个 CSS 类。我正在制作一个类似框架的东西，它有左、中和右部分，但有三种不同的配色方案。所以我不想制作 9 个不同的类，我像这个例子一样使用 CSS 功能：

.container-header .left { /* Some styles here... */ }
.container-header .left.style1 { /* Some styles here... */ }
.container-header .left.style2 { /* Some styles here... */ }
.container-header .left.style3 { /* Some styles here... */ }

.container-header .middle { /* Some styles here... */ }
.container-header .middle.style1 { /* Some styles here... */ }
.container-header .middle.style2 { /* Some styles here... */ }
.container-header .middle.style3 { /* Some styles here... */ }

.container-header .right { /* Some styles here... */ }
.container-header .right.style1 { /* Some styles here... */ }
.container-header .right.style2 { /* Some styles here... */ }
.container-header .right.style3 { /* Some styles here... */ }

一切都很完美，然后我打开了 Internet Explorer。在我的 HTML 中，我有一个简单的结构，如下所示：

<div class="container-header">
    <div class="left style1"></div>
    <div class="middle style1"></div>
    <div class="right style1"></div>
</div>

问题是 IE 有自己的意见，并在代码中的最后一个元素之前跳过了所有 CSS 样式。我的意思是左 style1和中间 style1正在使用正确的 style1样式进行渲染。我不知道如何让 IE 在此之前阅读样式而不是跳过它们。如果有人写他的意见，我会很高兴。谢谢 ：）

PP：对不起我的英语不好。:(

4

1 回答 1

7

您的页面可能处于 quirks 模式，因此您需要向页面添加 doctype 声明，以便它以标准模式呈现。

IE 中的 Quirks 模式有一个错误，导致它只能读取类选择器链中的最后一个类，因此它会像这样对待您的规则：

.container-header .left { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

.container-header .middle { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

.container-header .right { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

这也会影响标准模式下的 IE6，唯一的解决方法是为您的 HTML 元素分配唯一的类。另请参阅此答案以获取说明。

作为旁注，这不是继承错误，而是级联错误（或者更确切地说，选择器解析错误导致级联错误）。

于 2012-09-24T16:15:24.923 回答