<main>元素在Internet Explorer 11中不起作用

Question

我正在嘗試使用CSS設置<main>元素的寬度。 只是使用

main {
  width:200px;
}

在除Internet Explorer之外的所有瀏覽器中都可以正常工作（Edge可以正常工作）。

看一下這個例子： JSfiddle

IE11中的結果：

Chrome中的結果：

Answer 1

Internet Explorer不支持HTML5 main元素（請參閱瀏覽器支持數據）。

您需要將main定義為塊級元素，以使width起作用。

進行以下調整：

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

由於Internet Explorer無法識別main元素-意味着它未在IE的默認樣式表中定義-因此它使用CSS初始值（根據規范）。

display屬性的初始值為inline 。

內聯元素將忽略width屬性。 從規格：

10.3.1內聯非替換元素

width屬性不適用。

通過將main元素定義為作者樣式中的塊級元素， width屬性將起作用。

更多細節：