html5shiv - 为什么它只适用于 IE？答案

【问题标题】：html5shiv - why is it only for IE?html5shiv - 为什么它只适用于 IE？
【发布时间】：2015-02-06 18:15:45
【问题描述】：

我想开始使用一些 HTML5 标签，但担心它会如何在不支持 HTML5 的浏览器上呈现。似乎 html5shiv 是我可以用于 IE 浏览器的解决方案

但是，如果浏览器不支持 HTML5 且不是 IE 怎么办？然后怎样呢？为什么 html5shiv 是 IE 的东西？

【问题讨论】：

标签： css html internet-explorer

【解决方案1】：

首先，需要明确的是，html5shiv 只是为了让您可以正确设置某些 HTML5 标记（section、article 等）的样式。它没有为浏览器提供任何更一般意义上的“HTML5 支持”。

考虑到这一点，请注意，IE

其他浏览器（甚至像 Netscape Communicator 4 这样的非常老的浏览器）仍会正确解析无法识别的标签，并允许 CSS 像您期望的那样应用于它们。

正如 zzzzBov 在他的回答中指出的那样，它们可能没有正确的默认样式（在大多数（所有？）情况下要么是 display: block 要么什么都没有），所以即使是非 oldIE 浏览器也需要添加这些样式.但这样做在非 oldIE 浏览器中效果很好，而在 oldIE 中，添加这些默认样式（或任何样式）仅在您使用 html5shiv 时才有效。

【讨论】：

我认为未知标签的默认display 值是inline。
是的，添加最后一段来讨论这个问题。
@Salman A：正确。它也被称为 initial 值，当没有浏览器默认值或作者声明的值时设置的值。

【解决方案2】：

元素的display 属性的初始值为inline (ref)。内置的用户代理样式表将属性更改为已知元素的合理值；例如，标题和段落被更改为块。

HTML5 引入了新元素，例如页眉、页脚、文章和部分（HTML5 分节元素）。由于较旧的浏览器不知道它们，因此它们将这些元素视为内联元素。因此，您必须手动为这些元素添加 CSS 规则：

header, footer, article, section { display: block; }

但正如the Story of the HTML5 Shiv中提到的：

...Internet Explorer 6-8 存在问题，因为它们无法识别未知元素；新元素不能容纳孩子并且是不受 CSS 影响

该文章中还提到了 IE 6-8 的解决方法：

顺便说一句，如果你想让 CSS 规则应用于 IE 中的未知元素，你只需要做document.createElement(elementName)。这以某种方式让 CSS 引擎知道具有该名称的元素存在

现在，关于您的问题：html5shiv 使用一些 JavaScript 技巧使 IE 6-8 中的未知元素 styleable。至于 other 不支持 HTML5 的浏览器，如果需要，html5shiv 会添加正确呈现 HTML5 元素所需的默认样式，这样您就不必自己定义 CSS 规则（如前所述以上）。

请注意，html5shiv 不会使浏览器支持 HTML5。例如，它不能让 IE7 播放通过 HTML5 <video> 标签嵌入的视频。

【讨论】：

"浏览器有一组默认的未知元素样式。"具体来说，这些默认值由规范确定，除非另有说明，否则浏览器必须遵守它们。所有元素的默认值实际上都是相同的——如果某些东西默认显示为块，那是因为用户代理样式表是这样说的。
@BoltClock：了解。澄清一下，我所说的未知元素是指浏览器（或其特定版本）发布时规范中未提及的那些元素。

【解决方案3】：

其他浏览器只需设置css display 属性即可支持非标准元素：

header,
footer,
article,
section,
...etc... {
    display: block;
}

对于旧版本的 Firefox 和基于 webkit 的浏览器（HTML5 之前），这就是所有必要的。

【讨论】：

它们被自动解释为 DOM 元素，无需设置 display 属性 - 您需要将它们显式设置为 block 的真正原因是因为初始值为 inline对于没有浏览器默认值的任何元素（如您所说的非标准元素）。

【解决方案4】：

htmlshiv 是一个“IE”的东西，因为某些版本的 IE [仍然] 缺乏许多 HTML5 功能。在 chrome 或其他 webkit 浏览器中有效的东西可能在 IE 中无效，因此 htmlshiv 尝试对缺少的功能进行 javascript 改编。准确地说，它也是一个 polyfill。

【讨论】：