Jens Renders Jens Renders - 1 year ago 103
CSS Question

<main> element not working in Internet Explorer 11

I'm trying to set the width of a

element with CSS. Just using

main {

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

Take a look at this example: JSfiddle

The result in IE11:

enter image description here

The result in Chrome:

enter image description here

Answer Source

The HTML5 main element is not supported by some versions of Internet Explorer (browser support).

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

Try this:

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 for display 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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download