afarkas/html5shiv

在旧版 Internet Explorer 中启用 HTML5 分区元素的默认方法。

维护者

详细信息

github.com/aFarkas/html5shiv

主页

源代码

问题

安装次数: 539,318

依赖项: 15

建议者: 0

安全: 0

星标: 9,882

关注者: 563

分支: 2,561

开放问题: 66

语言：JavaScript

类型：组件

3.7.3 2015-07-20 20:04 UTC

MIT, GPL-2.0 ed28c56c071bddfe7d635ad88995674957a016be

This package is not auto-updated.

Last update: 2024-09-10 02:18:57 UTC

README

HTML5 Shiv 允许在旧版 Internet Explorer 中使用 HTML5 分区元素，并为 Internet Explorer 6-9、Safari 4.x（以及 iPhone 3.x）和 Firefox 3.x 提供基本的 HTML5 样式。

这些文件的作用是什么？

html5shiv.js

  • 这包括基本的 createElement()shiv 技术，以及针对 IE6-8 的 document.createElement 和 document.createDocumentFragment 的 monkeypatches。它还针对 IE6-9、Safari 4.x 和 FF 3.x 应用了 基本样式。

html5shiv-printshiv.js

  • 这包括所有上述内容，以及一个机制，允许在 IE 6-8 中打印时，HTML5 元素可以样式化并包含子元素。

现在我能责怪谁了？

HTML5 Shiv 由 Alexander Farkas、Jonathan Neal 和 Paul Irish 维护，许多贡献来自 John-David Dalton。它还与 Modernizr 一起分发。

如果您在这些实现中遇到任何问题，可以在此处报告！ :)

有关 HTML5 Shiv 的完整故事以及所有参与其中的人，请阅读 HTML5 Shiv 的故事。

安装

使用 Bower

bower install html5shiv --save

这将克隆 HTML5 shiv 的最新版本到您的项目根目录下的 bower_components 目录，并创建或更新文件 bower.json，该文件指定了您的项目依赖项。

在您的页面 <head> 中包含 HTML5 shiv，并在任何样式表之后，使用条件注释。

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

手动安装

从该存储库下载并解压 最新的 zip 包，并将两个文件 dist/html5shiv.js 和 dist/html5shiv-printshiv.js 复制到您的项目中。然后按照上述方法在 <head> 中包含其中一个。

HTML5 Shiv API

HTML5 Shiv 作为一个简单的即插即用解决方案。在大多数情况下，无需配置 HTML5 Shiv 或使用 HTML5 Shiv 提供的方法。

html5.elements 选项

该 elements 选项是一个由空格分隔的字符串或数组，它描述了要 shiv 的 完整 元素列表。另请参阅 addElements。

在包含 html5shiv.js 之前配置 elements。

//create a global html5 options object
window.html5 = {
  'elements': 'mark section customelement' 
};

在包含 html5shiv.js 之后配置 elements。

//change the html5shiv options object 
window.html5.elements = 'mark section customelement';
//and re-invoke the `shivDocument` method
html5.shivDocument(document);

html5.shivCSS

如果 shivCSS 设置为 true，HTML5 Shiv 将将基本样式（主要是 display: block）添加到分区元素（如 section、article）。在大多数情况下，网页作者应该在他们的常规样式表中包含这些基本样式，以确保在不使用 JavaScript 的情况下支持旧浏览器（即 Firefox 3.6）。

默认情况下，shivCSS 为 true，并且可以在引入 html5shiv.js 之前将其设置为 false。

//create a global html5 options object
window.html5 = {
	'shivCSS': false
};

html5.shivMethods

如果将 shivMethods 选项设置为 true（默认值），HTML5 Shiv 将覆盖 Internet Explorer 6-8 中的 document.createElement/document.createDocumentFragment，以允许动态创建 HTML5 元素。

已知问题：如果使用覆盖的 createElement 方法创建元素，则此元素返回一个文档片段作为其 parentNode，但实际上应该是 null。如果脚本依赖于这种行为，则应将 shivMethods 设置为 false。注意：jQuery 1.7+ 已经实现了针对 Internet Explorer 6-8 的 HTML5 DOM 创建修复。如果您所有的脚本（包括第三方脚本）都使用 jQuery 的操作和 DOM 创建方法，您可能希望将此选项设置为 false。

在引入 html5shiv.js 之前配置 shivMethods。

//create a global html5 options object
window.html5 = {
	'shivMethods': false
};

在包含 html5shiv.js 之后配置 elements。

//change the html5shiv options object 
window.html5.shivMethods = false;

html5.addElements( newElements [, document] )

html5.addElements 方法扩展了需要 shiv 的元素列表。newElements 参数可以是空格分隔的列表或数组。

//extend list of elements to shiv
html5.addElements('element content');

html5.createElement( nodeName [, document] )

html5.createElement 方法即使在 shivMethods 设置为 false 的情况下也会创建一个 shived 元素。

var container = html5.createElement('div');
//container is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';

html5.createDocumentFragment( [document] )

html5.createDocumentFragment 方法即使在 shivMethods 设置为 false 的情况下也会创建一个 shived 文档片段。

var fragment = html5.createDocumentFragment();
var container = document.createElement('div');
fragment.appendChild(container);
//fragment is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';

HTML5 Shiv 已知问题及限制

  • shivMethods 选项（覆盖 document.createElement）和 html5.createElement 方法创建的元素没有断开连接并且有一个父节点（也请参阅问题 #64）
  • 当前 HTML5 Shiv 没有解决 cloneNode 问题。HTML5 元素可以动态创建，但在所有情况下都不能被克隆。
  • HTML5 Shiv 的 printshiv 版本必须改变打印样式和整个 DOM 以便打印。在复杂网站或有很多打印样式的场合，这可能会引起性能和/或样式问题。一个可能的解决方案是 HTML5 Shiv 的 htc-branch，它使用另一种技术为 Internet Explorer 6-8 实现打印样式。

其他 HTML5 元素项目怎么样了？

  • 该项目的原始构思和社区合作故事在 HTML5 Shiv 历史 中进行了描述。
  • Jon Neal 的 IEPP 解决了原始 html5shiv 的打印错误。它已合并到 html5shiv 中。
  • 2010 年 4 月，Shimprove 修复了 cloneNode，而 createElement 后来被合并到 html5shiv 中。
  • 2010 年 8 月由 JD Barlett 引入的 innerShiv 解决了将新的 HTML5 元素动态添加到 DOM 中的问题。jQuery 添加了支持，这使得 innerShiv 成为冗余的，而 html5shiv 也解决了相同的问题，因此该项目完成了。
  • Google Code 上的 html5shim 和 html5shiv 网站由 Remy Sharp 维护，并且是此 html5shiv 项目的相同分发点。
  • Modernizr 是由与 html5shiv 相同的人开发的，并且可以在 modernizr.com 上创建的任何自定义构建中包含最新版本。
  • 此 html5shiv 仓库现在包含了对上述库追求的所有边缘情况的测试，并且在开发和生产中都经过了广泛的测试。

有关 html5shiv 的详细变更日志 可用。

为什么叫它“shiv”？

术语shiv源自这里，这个词是由John Resig提出的，据信他使用这个词是为了其俚语意义，即一种用作刀类武器的尖利物体，针对的是Internet Explorer。事实上，John可能本想使用的是shim这个词，在计算机领域它意味着一种应用兼容性解决方案。尽管有拼写错误，但熟悉Internet Explorer的大多数开发者都喜欢这个词的视觉形象。孩子们，这就是词源。