HTML5 and CSS in Internet Explorer 8

I was testing a simple navigation menu created using the HTML5 element nav. Inside this element I put an unordered list with links. Then I tried to attach some styles to it using common CSS descendant selectors, like this:

nav {
  display: block;
}

nav ul {
  /* other styles */
}

It worked fine in Firefox, Safari, Opera and Chrome, but not in Internet Explorer 8, where all styles were simply ignored. The reason behind is pretty simple: IE8 not only ignores an unknown HTML5 element, but also prevents this element from being inserted into the normal document tree, thus resulting in cascading leaks when applying CSS. Fortunately, there's a simple fix: just add a class or ID attribute to the normal HTML 4 element that is the parent of the elements you want to stylize, like so:

<nav>

    <ul id="navigation">...</ul>


</nav>

Then your CSS styles will work correctly:

nav {display: block;}

#navigation {/* other styles */}

Of course this is a temporary solution, just to allow us to use a standard HTML5 element.