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>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的内容。但正如我所提到的，我不想打破语义。

Answer 1

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

Answer 2

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

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

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

Answer 3

IE中不支持主要元素：

MDN
caniuse

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

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

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

IE不会以<main>为中心，而是内容</main>

3 个答案: