IE 11 Dislikes <main>

This post explains a tiny boost Internet Explorer needs to render the HTML5 element “<main>” the same way the rest of the modern world does. It came up for me using IE 11-64 bit, but may pertain elsewhere.

Some History

The HTML element “<main>” was, after a little argument, accepted by the W3C into the HTML 5.1 specification in July 2013, with this definition:

The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Acceptance allowed the <body> element to revert to it’s historical meaning:

The body element represents the content of the document.

<main> should be used once per page and should not be enclosed within <article>, <aside>, <footer>, <header>, or <nav>. Because I find it semantically descriptive I like to use it, but Internet Explorer (at least version 11 and possibly other versions and other UAs) needs help rendering it.

A Little Help

Here’s some mark-up (only the pertinent part):
[html]
<body>
<main>
<p class="maintest">Display = "Default"</p>
</main>
</body>
</html>
[/html]

And some style rules:
[css]
main {
background-color: green;
padding: 1em;
display: default;
color: #fff;
width: 12em;
}

.maintest {
background-color: blue;
padding: 1em;
}
[/css]

Rendered in Chrome (the result I expect):
chrome-maintest

Rendered in Internet Explorer 11:
ie-maintest-bad

And here it is again in IE11 with the little boost — “display” changed from “default” to “block”:
ie-maintest-good

Obvious and easy. Much easier if you remember to do it.