如何正确使用 HTML5shiv...如何在 IE 9、Firefox、Safari 上工作？答案

【问题标题】：How to use HTML5shiv correctly... how work on IE 9, Firefox, Safari?如何正确使用 HTML5shiv...如何在 IE 9、Firefox、Safari 上工作？
【发布时间】：2016-04-16 12:05:18
【问题描述】：

问题

html5shiv 如何在 IE9 上使用 [if lt IE 9] 的条件注释适用于 IE8 及以下并执行 >Safari 4.x 和 Firefox 3.x 阅读 IE 有条件的cmets？如果不是，html5shiv 怎么可能使用他们Github Instructions 中建议的条件 cmets 在这些浏览器上工作？

有一个question here 询问是否可以在没有条件 cmets 的每个浏览器中使用它以及副作用是什么，但这不是我的问题。这个问题是 4 年前提出的。 HTML5 现在是标准的，Microsoft 不再为旧版浏览器提供支持，因此在每个浏览器中加载它现在都是疯狂的，我不会考虑这一点。我的问题与 Github 上的文档有关，html5shiv 使用该文档开箱即用地提供了什么，以及如何使用它来支持它声称支持的浏览器。

引用 Github 上关于 html5shiv 脚本的自述文件：

“它还为 IE6-9、Safari 4.x 和 FF 3.x 的 HTML5 元素应用基本样式。”

使用时间：

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

根据Stat Counter，在过去一年中，IE 8 和 9 的全球使用率从大约 4% 下降到大约 2%。自 1 月 12 日 Microsoft dropped support 用于旧版浏览器以来，似乎 html5shiv 现在或即将成为过去。看看这些旧版 IE 浏览器在未来一年下降多少会很有趣。

但是，根据您正在开发的内容，您可能仍希望支持这些浏览器。当您在上述统计数据中包括 Safari 4.x 和 Firefox 3 时，html5shiv 支持的总浏览器份额为 2.3%。对于大多数人来说，这不算什么，但如果您拥有一个电子商务网站，那么 2.3% 可能是巨大的。

关于我的实际问题，我想我要么忽略了文档中的某些内容，要么对 IE 条件 cmets 理解得不够好。

从逻辑上讲，我认为这是最好的方法。 IE 中的条件 cmets 在版本 5 到 9 中都可以工作，因此我们不应该无缘无故地在 IE5 中加载脚本。

<!--[if !(IE 5)]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

但是，在过去的 5 年中，我从未真正见过有人这样做，所以我显然遗漏了一些东西。另外，我仍然看不到这对 FF 3 和 Safari 4 是如何工作的，除非存在错误或导致它们无法读取 cmets 的东西。我打开了这个topic on html5shiv github regarding this issue as well，但没有得到答案。

HTML5shiv 很容易在数以百万计的网站上使用，大多数开发人员和网站所有者都认为它支持 IE9 Safari 4 和 FF 3 开箱即用。

Also, as far as I'm aware in regards to IE9, this is all that html5shiv does to support it.

article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}

如果这是真的，这可能是许多人停止使用它的另一个原因，考虑到当你把它拿出来并将它包含在你的 css 中（或 css 重置）时，你会下降到 1.39% html5shiv 实际上会产生影响的浏览器。

【问题讨论】：

恕我直言，我觉得将所有答案总结为您自己的答案是不好的做法，尤其是当您越来越少时，不要添加任何新内容，只需写出一点文字即可。跨度>
Are there any adverse side effects to loading html5shiv in every browser?的可能重复
@LGSon 给它一个休息的人......在我的赏金中，我要求“需要权威参考”（我指出的 html5shiv 的开发人员回答）。 Chuck 有一个很好的答案，但它似乎只回答了一半的问题，而且大多数答案只是重复了我在问题中提出的问题。
不管@LGSon，你有一个可靠的答案，但更改了 13 次，然后将其删除，只添加了一个社区 wiki，并举了一个与你的第一个不相近的例子。一天结束...问题已经解决了，请不要再纠结了，因为这无关紧要。

标签： javascript html twitter-bootstrap internet-explorer html5shiv

【解决方案1】：

旁注：您应该只将这样的浏览器统计数据作为非常松散的指南。此类网站上的统计数据远非福音，而且会因国家而异，因市场而异，因人口而异。您应该查看您自己网站的分析，看看您的用户中有多少属于 Safari 4、FireFox 3、Internet Explorer 6-8 类别（我的猜测是会低于 2.3%）。

（还请记住，FireFox 会自动更新，当前版本为 43（！），而 Safari 自动更新为 OSX，版本为 9。人们仍在使用旧版本的可能性非常小。我检查了我的一个非常受欢迎的分析网站：在过去一个月的 20,000 个会话中，只有 1 个使用 FF3，1 个使用 IE7，1 个使用 IE8，没有使用 Safari 4 或 IE6。）

但是，如果您热衷于针对这些异常值，以下是您问题的答案：

当使用[if lt IE 9]的条件注释用于IE8及以下时，html5shiv如何在IE9上工作

HTML5shiv 不适用于 IE9，因为它不需要。 Internet Explorer 9 已经正确支持几乎所有 HTML5 元素：

Safari 4.x 和 Firefox 3.x 是否读取 IE 条件 cmets？

Safari 和 FireFox 不支持 IE 条件注释，但可以像这样定位它们：

FF3：

/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: lime; }

Safari：

/* Safari only override */     
::i-block-chrome,.myClass {      color: lime;     }

但这不是 HTML5shiv 所做的，你是对的： HTML5shiv 主页上显示的条件语句不会被 FF3 或 Safari 4 当前的状态。我猜这是因为他们认为这些浏览器非常稀有，以至于对于普通用户来说不值得。此外，任何 CSS 重置/规范化都可能包含这些浏览器所需的 CSS。

所以要了解如何在所有提到的浏览器中处理 HTML5 元素：

IE6-8：使用 HTML5shiv.js，如其Github documentation 中所述。

IE9-11：使用Normalize.css 或将main { display: block } 添加到您的HTML。（感谢 LGSon。）

Safari 4：使用 Normalize.css 或以下 CSS：

article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
    display: block;
}

FireFox 3：同上。

（FireFox 4+ 和 Safari 5+ 对 HTML5 的支持要强得多，不需要上面的 CSS。）

【讨论】：

终于有一个真正的答案了......在花了 30 分钟写下我自己的答案后，直到现在才看到这个......呃 :)
@BryanWillis 那么我建议你删除自己的并接受这个答案，我认为这是最合适的。
@BryanWillis 我比你早 10 小时写了这个答案 :)
我奖励你 50 分，因为你明白了要点。不幸的是，你从来没有深入了解它应该如何使用。
@BryanWillis 谢谢。从我写的内容可以很容易地推断出如何使用它：您应该按照 Github 页面上的描述与 CSS 重置/规范化器一起使用它（或手动输入我提供的 CSS）。添加gt IE 5 毫无意义，因为无论您做什么，您的网站都无法在 IE5 中正确呈现。

【解决方案2】：

shiv 脚本仅在 IE 中使用（在这种情况下低于版本 9 [...lt IE9...]），不用于其他浏览器，被它们忽略。毕竟被注释掉了

<!-- ... -->

IE 支持并读取它们。 shiv 脚本增强了功能以使那些旧浏览器“更好地”运行。

更新：看起来“lt IE9”也在 Safari 4.x 和 FF 3.x 中运行。从我能找到的（全部从 GitHub 项目描述中克隆）。

另一个更新：我确信这只适用于 IE，而不是旧的 Safari 或 FireFox。我会继续挖掘。如果我错了，请其他人纠正我。

【讨论】：

这是一个类似的论点。人们似乎只对 IE 竖起大拇指：stackoverflow.com/questions/6883010/…，这与位于此处的文档冲突：github.com/afarkas/html5shiv
关于 html5shiv 和 IE 的另一个很好的讨论：stackoverflow.com/questions/10407853/…（旧的 IE 是唯一一个不能正确样式化 HTML5 标签的浏览器）
我打算用 browserstack 之类的东西进行测试，但我想我会先在这里问。也许这是一个更好的问题，作为 github 问题提出......因此，假设 Safari 4 和 FF 3 读取 IE 条件 cmets，这仍然让我对这对 IE9 有什么作用感到困惑，除非将 [if lt IE9] 更改为 [if IE]， [if lte IE9]，或[if lt IE10]。
就我个人而言，无论如何我都使用引导程序，它支持假设添加到 IE9 的基本样式，因此它不会真正影响到我，但我只是想知道我猜。
好吧，你让我感兴趣。正是非 IE 浏览器“Safari 4.x 和 FF 3.x”让我觉得需要额外/其他工作才能让它们完全使用 HTML5。

【解决方案3】：

几年前我写了一个非常详细的页面，专门针对Internet Explorer Conditional Comments。这适用于 lte = 小于 [或] 等于 IE9；我已经记录了许多示例，可以在我编写的页面上复制和粘贴。

<head>
<!--[if lte IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>

我建议您的访问者从 Vista 升级，这是唯一可以运行 IE9 或更低版本并具有安全支持的 Windows 版本。自 2016 年 1 月起，每个 Windows 版本仅支持最新版本的 Internet Explorer。请参阅Internet Explorer Versions Wiki page，了解哪些版本的 IE 在哪些版本的 Windows 上运行。

截至 2010 年 1 月，只有 IE10+ 应受到任何有意义的关注。正确的策略是整页阻止 IE9 或更低版本；如果 Microsoft 不支持它，那么您也不应该除非您的薪酬至少是您在公司工作一年的两倍。坚守阵地的开发人员，我们是最终知道完成工作需要什么的人。

【讨论】：

谢谢约翰...是的，微软放弃支持实际上是最初让我想到问这个问题的原因。我帮助整理了一个源引导-wordpress 主题，我们试图弄清楚是否使用 [html5shiv][(github.com/salcode/bootstrap-genesis/issues/127)。关于if lte IE 9 的建议，!(IE 5) 不是最有意义的吗？ lte IE 9 将在 IE5 中加载，但 html5shiv 仅支持 6-9（据说）。
99.9% 的 IE5 用户是 Web 开发人员，他们仍然认为这是 2002 年，而 0.1% 的西伯利亚拨号用户真正喜欢 Windows 2000。我现在只正式支持 IE10+，在极少数情况下非官方支持 IE9。当用户使用过时的浏览器访问我的网站时，我会用他们无法忽略的强制升级消息完全阻止他们。我已经开始为客户端使用引导程序，它是可怕！他们在任何地方都使用padding（在子元素上使用margin），它真的很混乱和杂乱无章（.pull-left 应该只是.left）。避免它和像瘟疫一样的 WordPress。
很好奇您所指的填充/边距问题...您有我可以看到的示例吗？
我只是对 BS 的事情感到好奇，因为我以前从未听到过这种抱怨……不过，这并不是本次讨论的主题。 @LGSon 那个 javascript 函数如果有效的话看起来非常方便！绝对比 html5shiv 短很多......但我的主要问题仍未得到解答:(
@BryanWillis 这是一个插入式解决方案；使用 IE9 并打开开发工具，转到网络面板并确保对文件的请求已发出或打开您的 Apache 访问日志并确保在此处使用 HTTP 200 请求请求该文件。

【解决方案4】：

不，他们的 github 页面上的示例如何加载 shiv，除了 8 及以下版本的 IE 浏览器外，将无法在任何其他浏览器上运行，因为它使用了"downlevel-hidden" conditional comment 技术。

要使其在 IE9 及以下版本以及 Safari 和 Firefox 等非 IE 浏览器上运行，需要使用 "downlevel-revealed" conditional comment 技术，如下所示。

<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->

值得注意的是：

IE10 及更高版本不再支持条件 cmets，在此用例中将表现为非 IE 浏览器。
在已经支持 HTML5 元素的浏览器上，shiv 什么都不做。

【讨论】：

【解决方案5】：

回答我自己的问题...

html5shiv 的 github 文档具有误导性……仅此而已。在进一步挖掘之后，我遇到了this old HTML5SHIV Github issue that answers this question。

在 Firefox 3 或 Safari 4 (here's a very extensive list of awesome browser hacks) 中没有任何“浏览器怪癖或黑客行为”导致条件 cmets 被读取。

[if lt IE 9] 在 IE 5-8 中的工作方式应该如何...不要被自述文件所迷惑。

所以要明确一点，如果您使用下面的 sn-p，期望它能够神奇地在 IE9、Safari 3 或 Firefox 4 上运行，那么您很不走运。

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

那么html5shiv应该怎么用呢？

正如我在问题中提到的以及其他人在他们的回答中提到的那样，Microsoft 于 2016 年 1 月 12 日放弃了对旧版浏览器的支持。请记住这一点，并且我的问题中提到的这些统计数据可能存在偏差，我猜是legacy useage 在接下来的一年左右将继续以稳健的速度下降。最重要的是，当前的大部分使用可能来自slow to update 的老企业。对于大多数人来说，这些用户并不是他们从中获取流量的用户（尤其是因为这些计算机很可能是仅用于工作的计算机）。

就我个人而言，我不会再使用 html5shiv 了，但这既不是这里也不是那里。由于你们中的许多人可能仍会使用 HTML5，因此我根据个人经验、研究和此页面上有关 HTML5shiv 如何支持不同浏览器的其他答案提出建议...

如果您希望使用 html5shiv 支持 IE6-9、Safari 4 和 Firefox 3 而无需任何额外更改，请不要包含条件 cmets：

<script src="bower_components/html5shiv/dist/html5shiv.js"></script>

如果您想支持 Internet Explorer，请使用此功能。由于 html5shiv 不能在 IE 5 上运行，所以在那个可怜的浏览器中加载它是没有意义的：

<!--[if !(IE 5)]>
       <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

如果您只需要 Internet Explorer 8 或 9 的支持，请使用：

<!--[if (IE 8)|(IE 9)]>
       <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

选项 4：虽然上述方法可能是您需要的，但在一些人认为这是我认为是使用脚本的最有效方法之后。

<style type="text/css">
    article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
    mark{background:#FF0;color:#000}
</style>
<!--[if (gt IE 5)&(lt IE 9)]>
    <script type="text/javascript">window.html5={shivCSS:!1};</script>
    <script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

选项 4 1/2：“可能”是未来使用 HTML5Shiv 的最佳方式：

甚至比上面更好的是，我们可以删除类型属性，因为我们指定这是 HTML5 并且我们可以缩小它。我们还可以使用流行的 cdn，如 jsdeliver 或 maxcdn 来尝试加快速度，因为希望他们已经将文件缓存在他们的计算机上。不要，我再说一遍，不要使用 Google 来托管 html5shiv。这是人们常犯的错误，它只会缓存几分钟。 Google 代码并不意味着成为 CDN。

我们还禁用了 shiv css 并自己包含它。如果您使用的是css reset (here's a list of the most popular in 2016)，您可以将样式部分放在下面。

最后，我们按照建议将它包含在结束 head 标记之前。

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta, stylesheets, etc... -->
    <style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>
    <!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
</head>

此方法将确保您从支持您期望的浏览器的 HTML5shiv 中获得所需的结果。

由于 IE 不再支持旧版浏览器，并且 Firefox 和 Safari 具有自动更新功能），您很可能不再使用 shiv 并使用像 @LGSon 之类的解决方案或仅使用 CSS 样式/重置。

【讨论】：

恕我直言，当您说页面误导时，我认为您错了。如果确实知道 条件注释 是什么，那么 html5shiv 的 github 文档不会具有误导性，它们准确地解释了 shiv 的作用。这只是意味着，在使用之前需要了解所有周围的技术。
这具有误导性，因此为什么会有entire tread already started on this issue，而且我不会因为提出这个问题而获得 18 票赞成，Chiristopher Stevens 不会因为说他解释自“lt IE9”也运行在 Safari 4.x 和 FF 3.x 中的自述文件，当我在一个半星期前问这个愚蠢的问题是否显而易见时，有人会给出一个直截了当的回答。没有 1 个人能够回答它是否适用于这些浏览器，以及它实际上应该如何用于支持它们。
18 是针对问题的，这是一个很好的问题，而不是针对它在 github 上的编写方式......克里斯托弗的 5 票赞成是因为当他说 它只被使用时他是对的在 IE 中（在这种情况下低于版本 9 [...lt IE9...]），他只是不知道为什么。 ...我的前 2 段说明了它的作用和原因，现在可以用多种方式来表达，就像你所做的那样，它仍然回答了这个问题。
添加gt IE 5 毫无意义。浏览器已经死了（这就像确保 Fallout 4 在 Windows 95 上运行一样），但是，更确切地说，IE5 无论如何都不支持带有 OR 的 HTML/CSS，而没有 HTML5shiv。