为什么边距在带有 html5 和溢出的 Internet Explorer 中不起作用：隐藏？ [复制]答案

【问题标题】：Why margins don't work in Internet Explorer with html5 & overflow:hidden? [duplicate]为什么边距在带有 html5 和溢出的 Internet Explorer 中不起作用：隐藏？ [复制]
【发布时间】：2016-06-11 20:18:34
【问题描述】：

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; }

小提琴：https://jsfiddle.net/fhbyw80m/

还有为什么当我们这样使用时，边距在 IE 中不起作用？

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;}

小提琴：https://jsfiddle.net/gLLt9vhy/

【问题讨论】：

这似乎是一个错误，他们为 Edge 修复了它。
@Oriol 如果这是一个错误，那么他们为什么不先修复 IE ???
@Oriol，我不相信这是一个错误。只是main没有在IE的默认样式表中定义，所以元素使用CSS初始值（per the spec）。因此，display: inline 被应用，margin 和 overflow 无法按预期工作。
@Michael_B 是的，我在看到您的回答后考虑删除评论。但我认为当 IE 11 发布时，main 已经标准化（或者很明显它会标准化）。然后，不将其显示为默认样式表中的块可能会被视为错误：P

标签： html css

【解决方案1】：

Internet Explorer 不支持main 元素。

通过http://caniuse.com/#search=Main查看浏览器兼容性。

另见：

【讨论】：

那么如果我想在 html5 上做一个网站，并且想用
告诉搜索引擎我的主要内容该怎么办？
我用的是IE11，还支持部分...
你是对的......当我在两个小提琴中将
替换为
时，边距正在工作，所以我是否应该将 div 用于仍然在 html5 中的主包装器，因为 IE11 不支持是吗？
@BlackFire - 只需添加main { display:block; } IE11 就可以了。
无法识别的元素采用 CSS 属性的初始值。对于display，那就是inline。因为<main> 是（相对）新的，IE11 无法识别它，因此将其视为内联元素。顶部和底部边距对未替换的内联元素没有影响，overflow:hidden 仅在块框上创建块格式上下文，而不是内联框，因此您会看到效果。