使IE9内核支持渲染HTML5

作者: Darren 分类: 收藏发布时间: 2018-07-10 20:14

主流浏览器Trident内核与blink内核都都支持，但是微软的IE9甚至更低版本都不支持html5

让IE（包括IE6）支持HTML5元素，我们需要在HTML头部添加以下JavaScript， Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。

所以需要用到以下代码：

		<!-[if lt IE9]>
			<script src="html5.js"></script>
		<![endif]->

/*
 HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

HTML4样式布局：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
	div#news    {width:660px;margin:0 auto} 
	div.section {width:100%;} 
	div.article {width:500px;float:left;} 
	div.header  {width:100%;text-align:center} 
	div.content {width:100%;background:#ddd} 
	div.footer  {width:100%;background:#ddd} 
	div.aside   {width:150px;float:right}
</style>
<div id="news"> 
   <div class="section"> 
      <div class="article"> 
         <div class="header"> 
            <h1>Div 布局示范</h1> 
            <p>发表于2018年01月10日</p> 
         </div> 
         <div class="content"> 
            <p>内容文本等等.</p> 
            <p>内容文本等等.</p>
            <p>内容文本等等.</p>
         </div> 
         <div class="footer"> 
            <p>Tags: HMTL, 代码, 演示</p> 
         </div> 
      </div> 
      <div class="aside"> 
         <div class="header"> 
            <h1>附属信息</h1> 
         </div> 
         <div class="content"> 
            <p>内容文本等等.</p> 
            <p>内容文本等等.</p> 
            <p>内容文本等等.</p>
			<p>内容文本等等.</p>
         </div> 
         <div class="footer"> 
            <p>Tags: HMTL,演示</p>  
         </div> 
      </div> 
   </div> 
</div>

HTML5样式布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局示范</title>

		<style>
			section {width:660px;margin:0 auto} 
			article {width:500px;float:left;} 
			header  {width:100%;background:#ddd;text-align:center} 
			footer  {width:100%;background:#ddd} 
			aside   {width:150px;float:right}
		</style>
		
		<!-[if lt IE9]>
			<script src="html5.js"></script>
		<![endif]->
	</head>

	<body>
		<section> 
		   <section> 
			  <article> 
				 <header> 
					<h1>Div 布局示范</h1> 
					<p>发表于2018年01月10日</p> 
				 </header> 
				 <section> 
					<p>内容文本等等.</p> 
					<p>内容文本等等.</p> 
					<p>内容文本等等.</p> 
				 </section> 
				 <footer> 
					<p>Tags: HMTL, 代码, 演示</p> 
				 </footer> 
			  </article> 
			  <aside> 
				 <header> 
					<h1>附属信息</h1> 
				 </header> 
				 <section> 
					<p>内容文本等等.</p> 
					<p>内容文本等等.</p> 
					<p>内容文本等等.</p> 
					<p>内容文本等等.</p> 
				 </section> 
				 <footer> 
					<p>Tags: HMTL,演示</p> 
				 </footer> 
			  </aside> 
		   </section> 
		</section>
	</body>
</html>