css - <main> element not working in Internet Explorer 11

Question

I'm trying to set the width of a <main> element with CSS. Just using

main {
  width:200px;
}

works fine in all browsers except Internet Explorer (Edge does work).

Take a look at this example: JSfiddle

The result in IE11:

The result in Chrome:

Answer 1

The HTML5 main element is not supported by Internet Explorer (see browser support data).

You'll need to define main as a block-level element for width to work.

Make this adjustment:

main {
  display: block;  /* new */
  width: 200px;
}

Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec).

The initial value of the display property is inline.

The width property is ignored by inline elements. From the spec:

10.3.1 Inline, non-replaced elements

The width property does not apply.

By defining the main element as a block-level element in author styles, the width property will work.

More details:

• Default settings of unrecognized HTML elements
• Default style sheet for HTML 4
• main property browser compatibility
• display property definition and initial value