CSS rule “.drop.a” being applied to class “drag a”

Question

I have the following HTML markup:

<div class="drag a"></div>
<div class="drop a"></div>

I also have the following CSS rule, which should only be applied to my 2nd div:

.drop.a
{
   background-color:red;
}

This is working fine, except in Internet Explorer 9 the CSS rule is being applied to both elements.

Why is this? I thought this kind of CSS was universally compatible with all browsers?

Answer 1

I thought this kind of CSS was universally compatible with all browsers?

Nope. IE up to and including version 6 ignores all class selectors in a chain except the last one. IE9 may be rendering your page in quirks mode, meaning it'll act like its predecessors, and treat your .drop.a selector as .a instead.

Try adding a doctype declaration to your page and see if that fixes it. If you already have one on your page and you're still seeing this behavior, something else is wrong.