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

Question

HTML:

<main>
  <p>
  this is a paragraph in main...
  </p>
</main>
<section>
  this is a section...
</section>

CSS:

p{ margin:100px; background:#99ff99; }
main{ overflow:hidden; background:#ff9999; }
section{ margin:100px; background:#9999ff; }

Also why margin don't work in IE when we use like this?

HTML:

<main>
  <p>
  this is a paragraph...
  </p>
</main>
<aside>
  this is aside...
</aside>

CSS:

main{background:#ff9999; margin-bottom:150px; }
p{background:#99ff99; margin-bottom:30px; }
aside{background:#9999ff;}

@Oriol if it is a bug then why they are not fixing IE first ??? — proseosoc, Feb 29 '16 at 17:28
@Oriol, I don't believe it is a bug. It's just that `main` isn't defined in IE's default style sheet, so the element uses CSS initial values ([per the spec](https://drafts.csswg.org/css2/cascade.html#specified-value)). Thus, `display: inline` gets applied and `margin` and `overflow` don't work as expected. — Michael Benjamin, Mar 06 '16 at 00:21
@Michael_B True, and I considered deleting the comment after seeing your answer. But I think when IE 11 was published, `main` had already been standardized (or it was clear it would become standardized). Then, not displaying it as a block in the default stylesheet could be considered a bug :P — Oriol, Mar 06 '16 at 00:30

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

The main element is not supported by Internet Explorer.

Also see:

edited May 23 '17 at 12:18

Community

answered Feb 28 '16 at 21:45

Michael Benjamin

then what should I do if I want to make a website on html5 and also want to tell search engines about my main content with
?
– proseosoc Feb 28 '16 at 21:51
i am using IE11, it still have partial support... – proseosoc Feb 28 '16 at 21:54
you are right... when i replaced
with
in both fiddles then margins are working, so should i use div for main wrapper still in html5 just because IE11 don't support it ?
– proseosoc Feb 28 '16 at 22:01
3

@BlackFire - just add `main { display:block; }` and IE11 is fine. – Alohci Feb 28 '16 at 22:03
@Alohci Thank you very much! But why this? because it's partially supported by IE11? so should i also use display:block; for other partially supported elements? – proseosoc Feb 28 '16 at 22:12
3

Unrecognised elements take the initial values of CSS properties. For `display` that's `inline`. Because `
` is (relatively) new, IE11 doesn't recognise it, so treats it as an inline element. Top and bottom margins have no effect on non-replaced inline elements, and `overflow:hidden` only creates a block fomatting context on block boxes, not inline ones, hence the effects you see.
– Alohci Feb 28 '16 at 22:20

1 Answers1