I’ve been using some of the new HTML5 elements in a new web page template. While working on the CSS for the page, I noticed some interesting behavior in Internet Explorer 7 and 8. I have gotten in to the habit of writing very tightly-scoped CSS selectors; so tight, in fact, you would break the rule with the insertion of a single element into the DOM path.

div.businessProfile > ul.profileTools > li.follow > a.twitterLink {...}

So, when I added some of the new elements in to the selector, it looked like this:

div.businessProfile > header > nav > ul.profileTools > li.follow > a.twitterLink {...
}

This worked fine while I was still developing the page in Chrome. And it looked good in IE 9 as well. But when I checked it in IE 7 and 8, the style rules weren’t getting applied. I realized that the parser for Trident – the IE layout engine – didn’t know what to do with the HTML5 elements, even with the HTML5 DTD.

The quickest solution involves removing the HTML5 elements from the selector (and thus loosening the scope of the definitions’ application).

div.businessProfile ul.profileTools > li.follow > a.twitterLink {...}

Using conditional comments, one could load these definitions selectively for the defective browsers. But, then we’d be left with two separate style sheets to maintain.

Aside from using a CSS framework, or implementing a JavaScript hack, I’d love to find another solution, but I’ve got nothing yet.