<Main> Element Not Working in Internet Explorer 11

main element not working in Internet Explorer 11

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

IE11 not recognizing HTML5 elements when loading a page from my desktop, any ideas why?

Both Pedro Mendes and Lance Leonard's comments worked.

Pedro's solution:

Does your browser have the "Edge (default)" document mode set? Try
this tag inside the header

Lance's solution:

Your page is likely being loaded in compatibility view. Please see
this previous answer for more info.

I decided to go with Lance's solution so that if I make more pages in the future I won't have to include the meta tag every time.

IE11/10 HTML5 main tag and overflow:hidden bug

The answer is because the <main> HTML5 tag is not supported in IE10/11.

If you change your HTML to :

<div style="height:0px;overflow:hidden;">
    <div>
       This should not be displayed
    </div>
</div>

You should no longer see the content displayed.

Or you could add display: block to your <main> tag.

See link :

https://developer.mozilla.org/en/docs/Web/HTML/Element/main

Why margins don't work in Internet Explorer with html5 & overflow:hidden?

The main element is not supported by Internet Explorer.

See browser compatibility at http://caniuse.com/#search=Main.

Also see:

• <main> element not working in Internet Explorer 11
• Default settings of unrecognized HTML elements

Why I cant see html element on Internet Explorer?

initial keyword doesn't work on IE. That's fine, the correct behaviour of IE (nothing works). But to fix your problem, write the correct that's inline for form elements.

 display: inline

And for textarea

 display: inline-block

Final code:

.edit-mode {
    .view {
        display: none;
        background-color:red;
    }

    .edit, input[type=file].edit {
        display: inline-block;
    }
}

Complicated javascript code line causes error in Internet Explorer 11

Can you try this one?

    tmp_offices.sort(function (a, b) {
      return a[IX_OFFICE_NAME] > b[IX_OFFICE_NAME] ? 1 : b[IX_OFFICE_NAME] > a[IX_OFFICE_NAME] ? -1 : 0

;
});

---

Related Topics