WTF Internet Explorer?! Seriously, WTF?!?!

HTML & CSS
1

I’m just testing a site I’m working on.
It looks great in Chrome, FireFox and Safari, but completely mangled in IE 10.
I spent ages puzzling on why this could be and it turns out that for some reason IE treats the <main> element as though it isn’t there, or tries to display it inline or something weird.
Anyway, adding main{display: block;} made everything work in IE. Now I don’t know if I should cry or be happy.
What a great way to spend the morning. I hate IE sometimes.

1 Like
2

Yes, older browsers need display: block for those elements it doesn’t recognize, but you also have to be careful about it accepting unknown elements at all (certainly older versions, but not sure which ones it starts with). To be sure you are covering your back with older IEs you need some JS.

1 Like
3

Yeah, but IE 10? I thought that was meant to be relatively HTML5 compliant.
It has no problem with <header> and <nav> and so on. What is it with <main>??

I’m also using Remy Sharps’ HTML5 shim for older IE.

4

Your HTML5shiv (IIRC) should be in a conditional comment affecting IE8 and below. IE9+ support HTML5 elements.

5

Right, which made the fact that IE10 was ignoring <main> elements all the more confusing.

6

Got a website? I’m curious. I assume the first step of debugging (validating) has been completed?

7

I made a demo page with this markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>WTF IE?</title>
    <style>
      main{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        padding: 15px;
        background: red;
      }
    </style>
  </head>
  <body>
    <main>Hello, World!</main>
  </body>
</html>

If you look at it in IE10 in Standards mode, then you should see what I am talking about.
In Chrome the <main> element is 500px by 500px and centered. In IE10 it seems to be displaying inline.

8

IE10 only knows the html5 elements that were around at the time it was produced. :smile: The ‘main’ element was added later in 2013 I believe which would be about the same time ie10 was released so could not have been included in that release.

Browsers can’t know about elements that may be made in the future so new elements will be treated as display:inline (which is the default for all elements until the UA styles them). IE10 doesn’t need the shiv as it can handle new elements but will treat them as inline elements.

IE8 and below can’t handle new elements at all unless the shiv is added.

Just remember that when a new html5 element comes out then add its display value to your reset stylesheet.

3 Likes
9

Whaat! That’s outrageous. Why not!?!

Ah, that would explain things. Thanks, Paul.

1 Like
10

Yeah, Ralph got it right initially.

I was driving to work so I couldn’t answer, but here’s some more reading - http://www.sitepoint.com/html5-main-element/

1 Like
11

am sure spartan will make it all better.

12

IE really isn’t all that bad of a browser nowadays. I feel like people just hold grudges and prejudices against the older IE browsers and carries it to the present.

At least for CSS anyway.

13

Although I agree that IE is getting better and more standards compliant with every release, Microsoft has a lot of ground to make up. A case in point would be the dev tools or the lack of browser extensions. Also the long period between releases doesn’t do Microsoft any favours.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.