< main>元素在Internet Explorer 11中不工作 [英] <main> element not working in Internet Explorer 11

问题描述

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

  main {
 width：200px; 
} 
  

在所有浏览器中都可以正常工作， p>

查看此示例：

Chrome中的结果：

解决方案

某些版本的Internet Explorer不支持HTML5 main http://caniuse.com/#search=main =nofollow>浏览器支持）。

您需要定义<

请尝试以下操作：

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

因为 main 元素无法被Internet Explorer识别–这意味着它没有在IE的默认样式表中定义–它使用CSS初始值（按照规范）。 显示的初始值/ a> inline 。 width 属性被内联元素忽略。

根据规范：

10.3 .1内嵌，未替换的
元素

width

通过将 main

更多详细信息：

• 无法识别的HTML元素的默认设置


• HTML 4的默认样式表


• 主属性浏览器兼容性


• display 属性定义和初始值

I'm trying to set the width of a <main> element with CSS. Just using

main {
  width:200px;
}

works fine in all browsers except Internet Explorer (Edge does work).

Take a look at this example: JSfiddle

The result in IE11:

The result in Chrome:

解决方案

The HTML5 main element is not supported by some versions of Internet Explorer (browser support).

You'll need to define main as a block-level element for it to work.

Try this:

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

Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec). The initial value for display is inline. The width property is ignored by inline elements.

From the spec:

10.3.1 Inline, non-replaced elements

The width property does not apply.

By defining the main element as a block-level element in author styles, the width property will work.

More details:

• Default settings of unrecognized HTML elements
• Default style sheet for HTML 4
• main property browser compatibility
• display property definition and initial value

这篇关于&lt; main&gt;元素在Internet Explorer 11中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！