<主要>元素在 Internet Explorer 11 中不起作用 [英] <main> element not working in Internet Explorer 11

问题描述

我正在尝试使用 CSS 设置

元素的宽度.刚刚使用

main {宽度:200px；}

适用于除 Internet Explorer 之外的所有浏览器(Edge 也适用).

看看这个例子:

Chrome 中的结果:

解决方案

Internet Explorer 不支持 HTML5 main 元素 (查看浏览器支持数据).

您需要将 main 定义为块级元素，width 才能工作.

进行此调整:

main {显示:块；/* 新的 */宽度:200px；}

因为 main 元素不被 Internet Explorer 识别 –这意味着它没有在 IE 的默认样式表中定义 –它使用 CSS 初始值(根据规范).

display 属性是 inline.

width 属性被内联元素忽略.来自规范:

<块引用>

10.3.1 内联，不可替换元素

width 属性不适用.

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

更多详情:

• 无法识别的 HTML 元素的默认设置
• HTML 4 的默认样式表
• main 属性浏览器兼容性
• 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 Internet Explorer (see browser support data).

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

Make this adjustment:

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 of the display property 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;主要&gt;元素在 Internet Explorer 11 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！