23

问题

当使用的条件注释用于IE8及更低版本并且Safari 4.x和Firefox 3.x读取IE条件注释时， html5shiv如何在IE9上工作 ？如果不是， html5shiv怎么可能使用他们的Github 说明中建议的条件注释在这些浏览器上工作？[if lt IE 9]

这里有一个问题，询问是否可以在没有条件注释的情况下在每个浏览器中使用它以及副作用是什么，但这不是我的问题。这个问题是 4 年前提出的。HTML5 现在是标准的，微软不再提供对旧版浏览器的支持，因此在每个浏览器中加载它现在都是疯狂的，我不会考虑这一点。我的问题与 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 日放弃了对旧版浏览器的支持，似乎 html5shiv 现在或即将成为过去。看看这些旧版 IE 浏览器在未来一年下降多少会很有趣。

统计计数器

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

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

从逻辑上讲，我认为这将是最好的方法。IE 中的条件注释适用于版本 5 到 9，因此我们不应该无缘无故地在 IE5 中加载脚本。

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

然而，在过去的 5 年里，我从未真正见过有人这样做，所以我显然错过了一些东西。另外，我仍然看不到这对 FF 3 和 Safari 4 会如何工作，除非有错误或导致他们不阅读评论的东西。关于这个问题，我也在 html5shiv github 上打开了这个主题，但一直没有得到答案。

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

此外，据我所知，关于 IE9，这就是 html5shiv 为支持它所做的一切。 

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

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

4

5 回答 5

6

旁注：您应该只将这样的浏览器统计信息作为一个非常松散的指南。此类网站上的统计数据远非福音，而且会因国家而异，因市场而异，因人口而异。您应该查看您自己网站的分析，看看您的用户中有多少属于 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 条件注释吗？

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

FF3：

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

苹果浏览器：

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

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

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

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

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。）

于 2016-01-21T12:40:59.013 回答
5

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

<!-- ... -->

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

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

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

于 2016-01-12T01:31:56.867 回答
1

几年前，我写了一个非常详细的页面，专门用于Internet Explorer 条件注释。这是针对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 版本 Wiki 页面，了解哪些版本的 IE 在哪些版本的 Windows 上运行。

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

于 2016-01-19T20:43:27.570 回答
0

不，他们的 github 页面上的示例如何加载 shiv，除了 8 及以下版本的 IE 浏览器之外，将无法在任何其他浏览器上运行，因为它使用“下层隐藏”条件注释技术。

为了使其在 IE9 及以下版本以及 Safari 和 Firefox 等非 IE 浏览器上运行，需要使用“下层显示”条件注释技术，如下所示。

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

值得注意的旁注是：

  • IE10 及更高版本不再支持条件注释，在此用例中将表现为非 IE 浏览器。

  • 在已经支持 HTML5 元素的浏览器上，shiv 会什么都不做。

于 2016-01-23T08:22:00.233 回答
-2

要回答我自己的问题...

html5shiv 的 github 文档具有误导性……就是这样。在做了一些进一步的挖掘之后，我遇到了这个回答这个问题的旧 HTML5SHIV Github 问题。

没有任何“浏览器怪癖或黑客”会导致在 Firefox 3 或 Safari 4 中读取条件注释（这里有一个非常广泛的很棒的浏览器黑客列表）。

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

所以要清楚，如果您使用下面的代码片段，期望它神奇地适用于 IE9、Safari 3 或 Firefox 4，那么您很不走运。

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

那么html5shiv应该如何使用呢？

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

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

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

<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 重置（这里是 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 样式/重置。

于 2016-01-21T22:33:42.480 回答