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

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

<!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的语法全部乱了，比如

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

他在ie8以下解析成了

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

注意下其中的/符号，整个框架在ie8以下全部被无视掉了，且其他的语法 如<aside></aside>

;<header><header/>;等等都解析错误

这个后果就造成了针对footer,header,aside等的css全部失效，后果可想而知吧。

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

<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>

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

转: 让html5标签在ie8及以下的被正确解析的解决方案的更多相关文章

  1. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  2. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法zt

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  3. 解决IE8不支持html5标签最好解决办法？

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法:HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显 ...

  4. HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...

  5. 【H5】ie8如何兼容html5标签（hack）

    ie8是识别不了html5语义化标签的,解决方法: 在头部文件的<head></head>里面下如下代码    (这段代码的意思是如果ie版本低于ie8,就创建所有HTML5新 ...

  6. ie8下面版本号（包含ie8）的浏览器不支持html5标签属性解决方式（Modernizr 2.6.2插件的使用）

    我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...

  7. [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  8. 解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  9. HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局.大多数浏览器基本兼容html5,但目前来说ie6/ie7/ie8还不兼容html5标签,所以需要javascript处理 ...

随机推荐

  1. Uber司机一周体验记：成单率仅57%

    虽然注册过程不顺利,但耗时一下午终究还是当上人民优步司机了.而且一周下来也完成了十几单,个中滋味恐怕只有载着陌生的乘客开上路才能体会. 第一单 一位赶去面试的年轻人,刚来北京两年,因为路线不熟坐错了公 ...

  2. kbengine Unity3d demo 代码执行流程（4）

    当服务端成功启动,客户端链接服务端后进入demo中的游戏界面,demo中的功能包括注册.登录.角色管理.战斗.场景等等. 对于新接触kbengine的人,看见客户端的代码后会觉得很迷茫,有些无从下手. ...

  3. swig include使用方法

    {% block content2 %} {% include "footer.html" %} {% endblock %} include语句必须放到 block模块中,不然不 ...

  4. [每日一题] 11gOCP 1z0-052 :2013-09-10 ABOUT ALERTS...............................................A50

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/11546561 正确答案:AD 使用服务器生成的警报系统,从Oracle10g版本开始,Or ...

  5. Mysql 正则表达式 判断字段值不包含数字

    SELECT * FROM (select replace(FlightId_IaTa,LEFT(FlightId_IaTa,2),'') as aa,FlightId_IaTa,FlightIdfr ...

  6. USB 开发

    http://blog.csdn.net/myarrow/article/details/8484113

  7. C#隐藏桌面图标和任务栏

    最近因为项目需要需要实现桌面图标和任务状态栏的隐藏功能,实现的方式很多,比如修改注册表值,调用windows API函数等.经过一番的查阅,这个功能暂时实现了,或许不是很好的方法,但是我预期的效果达到 ...

  8. 笔记 postgresql oid同步

    以前学习postgresql的笔记 create table 消耗 OID 如create table my_test_table, 他本身会消耗一个 会在pg_type中插入两条记录_my_test ...

  9. 几个linux 下C/C++集成开发环境推荐

    链接地址:http://www.lupaworld.com/article-210675-1.html 摘要: 一.AnjutaAnjuta是一个多语言的IDE,它最大的特色是灵活,同时打开多个文件, ...

  10. 关于LZO和LZOP

    LZO  是一个适合实时解压.压缩的压缩库 LZOP 基于LZO库的压缩解压工具   PS:有了压缩解压库LZO,还不能直接操作文件压缩解压,需要LZOP   下载的话直接google吧~~~