Question

我遇到了Internet Explorer的问题，当然它在其他浏览器中运行良好。所以我有一个CSS clases。我正在做一个像左边，中间和右边部分的框架，但有三种不同的配色方案。所以我不想制作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样式。我的意思是左样式1 和中间样式1 使用右样式1 样式进行渲染。我不知道如何让IE在此之前阅读样式而不是跳过它们。如果有人写下他的意见，我会很高兴。谢谢:)）

PP：抱歉我的英语不好。 :(

Answer 1

您的页面可能处于怪癖模式，因此您需要在页面中添加doctype声明，以便在标准模式下呈现。

IE中的怪癖模式有一个错误，导致它只读取类选择器链中的最后一个类，因此它会像这样处理你的规则：

.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元素分配唯一的类。另请参阅this answer以获取说明。

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

IE不了解CSS继承

1 个答案: