IE 不会居中 <main> 而它的内容

Question

此 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>Whosebug: please help me</p>
    </aside>
</main>


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

如果你能帮我解决这个问题，我将不胜感激，最好不要使用 adding/removing 元素。如果可能的话，我想保留当前的语义。如果没有，那好吧...

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

Answer 1

由于我没有足够的声誉，我post我的想法作为答案：

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

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

Answer 2

IE 不支持主要元素：

MDN
caniuse

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

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

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

Answer 3

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

来添加

IE 不会居中 <main> 而它的内容

IE won't center <main> and it's content

html

css

internet-explorer

cross-browser

centering