HTML5 模板在 Internet Explorer 上不起作用，如何解决？答案

【问题标题】：HTML5 template not working on Internet Explorer, how to solve it?HTML5 模板在 Internet Explorer 上不起作用，如何解决？
【发布时间】：2014-03-06 11:20:57
【问题描述】：

我用 HTML5 制作了一个模板，该模板适用于 Chrome 和 Firefox，但不适用于 Internet Explorer（在 IE 8 上测试）。

我该如何解决这个问题？

【问题讨论】：

首先，我们需要一些代码...
html 5 tags in IE 8 and IE 7的可能重复

标签： html internet-explorer web-component html5-template

【解决方案1】：

只需将“display:none”添加到您的模板。适用于即 11

<template id="fancyTemplate" style="display:none"></template>

【讨论】：

很好的解决方案，谢谢！ Even IE11 显示 <template> 内容，无论它在 <head> 中。

【解决方案2】：

我向你推荐 Neovov 的 polyfill： https://github.com/neovov/template-element-polyfill

注意：IE 11 中存在一个错误：它在渲染 DOM 之前将

【讨论】：

这可能是最好的，但它仍然是有限的。因为模板标签内的东西被渲染了，你必须小心仍然遵循 HTML 嵌套规则——尽管一个正常运行的 Template 元素可以忽略这些规则。我的一些页面上出现“意外的结束标签”和类似内容。
例如：我一直在尝试将表格行放入模板中。因为（我认为）TR 不能只存在于 Body 内部，所以 IE 正在删除 TR 和 TD，只留下 TD 的内容。（即使使用 shiv 或 polyfill，IE 基本上也将 Template 视为一种类似 Div 的对象，并且 HTML 层次结构开始起作用）
你说得对，完全填充模板标签是不可能的
对。只是想给人们一个提示，以防他们期望这是一个完全的替代品。 :-)

【解决方案3】：

获取html4shiv的副本，在IE小于9的地方使用：

<!--[if lt IE 9]> 
<link rel="stylesheet" href="styles/ie.css" type="text/css"> <script src="scripts/ie/html5shiv.min.js"></script> 
<![endif]-->

【讨论】：

@knotty 当然，只是重新发明 html5shiv 所做的一切 :)
knotty 是对的，重写 html5shiv 是不值得的。顺便说一句，为什么是 IE8？那是6年前的版本。那时没有任何东西支持现代 HTML5。如果您需要免费资源来获取现代 Internet Explorer 版本进行测试，请访问 modern.ie，那里有免费的虚拟机可用。

【解决方案4】：

您正在搜索html5shiv。

它'启用'所有 html5 元素，这些元素在旧 Internet Explorer 版本中不可用。

【讨论】：

<template> is not available in ANY version of IE，不仅在旧版本中。不太确定 html5shiv 是否能解决问题...

【解决方案5】：

您可以尝试将<template>标签替换为<script>

<script id="fancyTemplate"></script>

【讨论】：

不要忘记添加类型，因为默认是 javascript。 <script type="text/x-template" id="fancyTemplate"></script>

【解决方案6】：

您可以使用 CSS 隐藏元素：template { display:none !important; }

如果您需要在其他浏览器中访问/克隆内容，请使用此 polyfill：https://github.com/jeffcarp/template-polyfill

但请记住，<template> 的内容仍然可以在 DOM 中找到并被执行——这正是标记的主要目标。没有任何 polyfill 可以阻止这种情况的发生，IE 再次拖慢了现代 Web 开发的速度。

【讨论】：