IE 不会居中 <main> 和它的内容答案

【问题标题】：IE won't center <main> and it's contentIE 不会居中 <main> 和它的内容
【发布时间】：2015-04-22 05:04:01
【问题描述】：

此 CSS 适用于 firefox 和 chrome，但由于某些奇怪的原因，它不适用于 IE =(

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>I hate u, ie :p</title>

    <style>
    header>nav, main, footer>nav {
        max-width: 500px;
        padding: 0em;
        margin: 0em auto;
        }
    header, footer { min-width: 100%; background-color: #c0c0c0;}

    main { background-color: yellow; }
    main>section, main>aside { display: inline-block; }
    main>section    { background-color: aqua; }
    main>aside      { background-color: pink; }
    </style>
</head>
<body>


<header>
    <nav>
    <ul><li>Header is centered =)</li></ul>
    </nav>

    <nav>
    <ul><li>Header (nemu 2) is centered =)</li></ul>
    </nav>
</header>


<main>
    <section>
    <h1>Why IE won't center me?</h1>
    </section>

    <aside>
    <p>Stackoverflow: please help me</p>
    </aside>
</main>


<footer>
    <nav>
    <ul><li>Footer is centered =)</li></ul>
    </nav>
</footer>
</body>
</html>

如果您能帮我解决这个问题，我将不胜感激，最好不要添加/删除元素。如果可能的话，我想保留当前的语义。如果没有，那好吧……

值得一提的是，如果我执行<main><div>...</div></main> 之类的操作并添加main>div { margin: 0em auto;} IE（以及所有其他浏览器，如预期的那样）中心main 的内容。但就像我提到的，我不想破坏语义。

【问题讨论】：

标签： html css internet-explorer cross-browser centering

【解决方案1】：

IE 不支持主元素。但是，要使其正常工作，您只需设置 main { display:block; } 即可。这是对其他新 HTML5 元素（例如 section 和 nav）的类似修复，这些元素不受支持，但可以通过添加 CSS 来添加。

【讨论】：

这很聪明。我早该想到的。

【解决方案2】：

由于我没有足够的声誉，我将我的想法发布为答案：

我的猜测是，您必须为您的.main 添加position: relative;。

浏览器有一个default.css，其中包含您未设置的键的默认值。我认为（但没有检查）IE 的标准值与其他浏览器不同。这可能会导致问题。

【讨论】：

仅仅因为您没有足够的声誉来发表评论并不意味着您应该通过发布 cmets 作为答案来规避该限制。
好吧，下次我不要了。我很抱歉。

【解决方案3】：

IE不支持main元素：

MDN
caniuse

我认为这意味着main 元素没有默认样式，因此您必须添加它。大多数重置样式表都会为更新、更多语义元素执行此操作。

将display: block 添加到main 的CSS 选择器中，它应该可以工作。

main {
    display: block;
    max-width: 500px;
    margin: 0 auto;
}

【讨论】：

@mr-lister 这真是一个很好的观察 =) 我也是，我想知道
Not Supported 意味着，我相信该元素没有默认样式。如果您提供它们，那么它们应该会被使用。
@MrLister - 对于<main>，浏览器为了支持它必须做的最重要的事情就是将其暴露给平台可访问性 API，作为 WAI-ARIA 主要标志性角色的位置。更一般地，可以合理地认为类型为 HTMLUnknownElement 的元素不受支持。