Question

我遇到了IE无法正确呈现页面的问题。

Google Chrome enter image description here

Internet Explorer 11 enter image description here

基本上我试图使main元素宽1000px，但是Internet Explorer无法实现这一目标。我使用最大宽度为1000px，宽度为100％进行流畅布局，但IE似乎忽略了它。我已经在两个浏览器中仔细检查了代码检查，以确保没有任何内容覆盖它。

标记

...
<body>
  <header>
    ...
  </header>
  <main>
    <header>
      <h1>Flavors</h1>
    </header>

    <h2>Basic</h2>
    <figure>
      <img src="...">
      <figcaption></figcaption>
    </figure>
    ...
  </main>
...

风格

...
body {
  margin: auto;
  background: white;
  text-align: center;
}
main {
  width: 100%;
  max-width: 1000px;
  margin: -1rem auto -1rem;
  text-align: left;
}

Answer 1

感谢@steveax，我能够弄清楚问题是IE缺少对main元素的支持。经过30分钟的研究和测试后，我想出了一个解决方案。

在我的head标签中，我在所有css链接上添加了以下代码：

<script>document.createElement('main');</script>

在我的样式表中，我添加了：

main { display: block; }

现在页面在Internet Explorer中正确呈现（至少10＆amp; 11）。

enter image description here

IE元素百分比宽度/最大宽度错误

1 个答案: