IE does not understand CSS inheritance

Question

I have a problem with Internet Explorer and of course it works prefect in other browsers. So I have a CSS clases. I am making a something like a frame which has got a left, middle and right part, but with three different color schemes. So I don't want to make 9 different classes and I use CSS power like this example:

.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... */ }

Everything was perfect and then I opened Internet Explorer. In my HTML I have a simple construction like this:

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

The problem is that IE has got own opinion and skip all of the CSS styles before the last element in the code. I mean that left style1 and middle style1 are rendering with the right style1 styles. I have no idea how to make IE to read the styles before this and not to skip them. I will be very happy if anyone write his opinion. Thanks :)

PP: Sorry for my bad English. :(

score 7 · Accepted Answer · edited May 23 '17 at 12:27

Your page is probably in quirks mode, so you need to add a doctype declaration to your page for it to render in standards mode.

Quirks mode in IE has a bug that causes it to read only the last class in a chain of class selectors, so it's treating your rules like this:

.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... */ }

This also affects IE6 in standards mode, for which the only workaround is to assign unique classes to your HTML elements. Also see this answer for an illustration.

As a side note, this isn't an inheritance error, but a cascading error (or rather, a selector parsing error resulting in bad cascading).

the following page describes the issue succinctly: http://ryanbrill.com/archives/multiple-classes-in-ie — MaxPRafferty, Sep 24 '12 at 16:17
I am using IE9 but really my doctype is missing. Thanks for the fast answer and sorry about my stupid mistake. Thanks — valkirilov, Sep 24 '12 at 16:19

IE does not understand CSS inheritance

1 Answers1