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):
<p class="maintest">Display = "Default"</p>

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

.maintest {
background-color: blue;
padding: 1em;

Rendered in Chrome (the result I expect):

Rendered in Internet Explorer 11:

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

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