转: 让html5标签在ie8及如下的被正确解析的解决方案

时间 2019-11-26

标签 html5 html 标签 ie8 如下正确解析解决方案栏目 HTML5 繁體版

原文原文链接

最近仿的几个主题中，有几个是采用html5语法制做的，html5嘛，之后必然大势所趋，可是现有的不少浏览器并不支持这种新的标准。javascript

而我制做网站习惯用的是chrome浏览器的，固然不存在不兼容问题了。css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--<script type="text/javascript">
    document.createElement('header');
    document.createElement('nav');
    document.createElement('figcaption');
    document.createElement('figure');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer'); 
    //注意是在header里面引入或写兼容js, 在页面底部无效。这样建立对应标签 经测试ie8能正常识别标签，但标签都变成行内元素，
    //仍是google的html5.js这个加强脚本好，能让标签表现为正常的块级或行内元素。
</script>-->
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<header> it is header content </header>
<footer> it is footer content</footer>


</body>
</html>

等主题作完上线后，经ie8如下浏览器测试，页面惨不忍睹，我在ie10的ie8模式下查看了ie7解析html的语法所有乱了，好比html

<footer>这里是footer部分</footer>html5

他在ie8如下解析成了java

<footer/>这里是footer部分</footer/>chrome

注意下其中的/符号，整个框架在ie8如下所有被无视掉了，且其余的语法如<aside></aside>canvas

;<header><header/>;等等都解析错误浏览器

这个后果就形成了针对footer,header,aside等的css所有失效，后果可想而知吧。框架

或许是我对html5这种语法还很陌生吧,网上百度了下竟然没找到解决方法，而后就在几个交流群中咨询了下，可是无功而返，可是群友提醒了一句是否是meta信息问题，我也尝试了下，仍是不行，而后我只能对比其余的HTML5站点是怎么实现解析的，最终在源码中发现他们在里面加了一句js，使得低版本的浏览器也能正常解析。纠结。。。下面就是对应的js代码了。ide

<script type="text/javascript">document.createElement('header'); document.createElement('nav'); document.createElement('figcaption'); document.createElement('figure'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer');</script>

或者用下面这句也能够

<script type="text/javascript">(function(){var e="abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i]);}}());</script>

或者用Google的html5兼容性js也行（ps:国内部分地区被墙，最好下载到本地后加载）

<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

而后把你用到的标签加进去吧，这样就能正常解析了。