我在使用 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 样式。我的意思是 left style1 和 middle style1 使用 right style1 样式呈现。我不知道如何让 IE 在此之前阅读样式而不是跳过它们。如果有人写下他的意见,我将非常高兴。谢谢:)
PP:抱歉我的英语不好。 :(
最佳答案
您的页面可能处于怪异模式,因此您需要向页面添加一个文档类型声明,以便它以标准模式呈现。
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 元素分配唯一的类。另见 this answer举例说明。
作为旁注,这不是继承错误,而是级联错误(或者更确切地说,选择器解析错误导致级联错误)。
关于html - IE不理解CSS继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12568902/