Internet Explorer 11中<main>元素无法工作

Question

我试图用CSS设置一个<main>元素的宽度。只是使用

main {
  width:200px;
}

除了Internet Explorer（Edge可以）外，在所有浏览器中都能正常工作。

查看此示例：JSfiddle

IE11的结果：

Chrome的结果：

- Jens Renders

Answer 1

HTML5的main元素在Internet Explorer中不受支持（请参考浏览器支持数据）。

您需要将main定义为块级元素，以使width起作用。

进行以下调整：

main {
  display: block;  /* new */
  width: 200px;
}

由于Internet Explorer不承认main元素——也就是说，它没有在IE的默认样式表中定义——因此它使用CSS初始值（根据规范）。

display属性的初始值为inline。

width属性对内联元素无效。来自规范的说明：

10.3.1 内联非替换元素

width属性不适用。

通过在作者样式中将main元素定义为块级元素，width属性将起作用。

更多细节：

• 未识别的HTML元素的默认设置
• HTML 4的默认样式表
• main属性浏览器兼容性
• display属性定义和初始值

- Michael Benjamin

---

谢谢，这个可行！奇怪的是IE11不支持这个简单的HTML5标签。 - Jens Renders

@JensRenders，IE花费多年的时间才支持其他所有浏览器支持的新元素、CSS属性和API，所以这不足为奇，在Edge中也不会有太大的不同。 - Rob

主标签在Edge中默认为display: block :) - Julian H