我遇到了 IE 无法正确呈现我的页面的问题。
这是网站:Cakeball Flavors
谷歌浏览器
互联网浏览器 11
基本上，我试图使 main 元素的宽度达到 1000 像素，但 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;
}
最佳答案
感谢@steveax，我能够弄清楚问题是 IE 不支持 main 元素。经过 30 分钟的研究和测试，我想出了一个解决方案。
在我的 head 标签中，我在所有 CSS 链接之上添加了以下代码:
<script>document.createElement('main');</script>
在我的样式表中，我添加了:
main { display: block; }
现在页面可以在 Internet Explorer 中正确呈现(至少 10 和 11)。
关于html - IE 元素百分比宽度/最大宽度错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23690817/