-->

HTML5 template not working on Internet Explorer, h

2019-06-16 11:51发布

问题:

I made a template in HTML5 which is working with Chrome and Firefox but not working with Internet Explorer (tested on IE 8).

How can I solve this problem?

回答1:

I recommend you Neovov's polyfill: https://github.com/neovov/template-element-polyfill

NB: There's a bug in IE 11: it moves <template> under the <body> element before rendering the DOM! So the parentNode attribute is wrong, and nesting will fail. You can see it in the [F12] Tool.



回答2:

just add "display:none" to your templates. Works for i.e. 11

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


回答3:

You are searching for the html5shiv.

It 'enables' all the html5 elements, which aren't available in the old internet explorer versions.



回答4:

Get a copy of html4shiv, and use it where IE is less than 9:

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


回答5:

You can try to replace <template> tag by <script>

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


回答6:

You can hide the element using CSS: template { display:none !important; }

And if you need to access/clone the content like natively possible in other browsers, use this polyfill: https://github.com/jeffcarp/template-polyfill

But keep in mind the content of the <template> can still be found in the DOM and is executed - preventing exactly that is the main goal of the tag. No polyfill can stop that from happening, IE is once again slowing down modern web development.