转: 让html5标签在ie8及以下的被正确解析的解决方案
最近仿的几个主题中,有几个是采用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及以下的被正确解析的解决方案的更多相关文章
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法zt
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- 解决IE8不支持html5标签最好解决办法?
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法:HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显 ...
- HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...
- 【H5】ie8如何兼容html5标签(hack)
ie8是识别不了html5语义化标签的,解决方法: 在头部文件的<head></head>里面下如下代码 (这段代码的意思是如果ie版本低于ie8,就创建所有HTML5新 ...
- ie8下面版本号(包含ie8)的浏览器不支持html5标签属性解决方式(Modernizr 2.6.2插件的使用)
我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...
- [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- 解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局.大多数浏览器基本兼容html5,但目前来说ie6/ie7/ie8还不兼容html5标签,所以需要javascript处理 ...
随机推荐
- 学习pthreads,给线程传递多个參数
上篇博文中.boss线程给其它线程传递的仅仅有一个參数,那么假如是多个參数呢?怎么传递呢?也许你会有这种疑问,带着这个疑问,我们进入本文的世界,这里传递多个參数,採用结构体,为什么呢?由于结构体里能够 ...
- java concurrent之前戏synchronized
对于多线程共享资源的情况须要进行同步,以避免一个线程的修改被还有一个线程的修改所覆盖. 最普遍的同步方式就是synchronized. 把代码声明为synchronized.有两个重要后果,一般是指该 ...
- 用ahk脚本自己主动删除flashcookies
手动方法(请戳点击打开链接): 点击桌面左下脚的"開始"键 打开"控制面板" 并点击 "flash player" 项 进入 并点击&quo ...
- 我的一个关于RFID的项目总结
去年做的一个项目,今天在这里想总结一下,这是主要流程: [0]RFID(Reader)---->[1]网络---->[2]接收处理程序---->[3]队列---->[4]读/存 ...
- ajax_异步交互-get/post方式
Ajax的异步交互: 客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做任何其他事情(不等). 实现Ajax的异步交互步骤(举例说明): get方式: 1.创建XMLHttpReq ...
- Sqoop mysql 数据导入到hdfs
1.--direct 模式使用mysqldump 工具,所以节点上需要安装该工具,非direct 模式直接使用jdbc ,所以不需要 具体script参考如下: sqoop import --conn ...
- JSP内置对象----response
response 对象 当客户访问一个服务器的页面时,会提交一个HTTP 请求,服务器收到请求时,返回HTTP 响应.request 对象获取客户请求提交的信息, 与request对象相对应的对 ...
- ThinkPHP第十九天(Ueditor高亮插件、扩展函数载入load、静态缓存)
1.使用Ueditor编辑器,插入代码后,显示的时候高亮显示,需要调用Ueditor中的第三方插件third-party中的SyntaxHighlighter 调用方法: 引入CSS和JS文件,并调用 ...
- Java "==和equals区别"
本文转载至中软国际电子政务部Jeff Chi总结,转载请说明出处. 概述: A.==可用于基本类型和引用类型:当用于基本类型时候,是比较值是否相同:当用于引用类型的时候,是比较对象是否相 ...
- 5.PHP 教程_PHP echo/print
PHP echo 和 print 语句 echo和print区别: echo-可以输出一个或多个字符串 print-只允许输出一个字符串,返回值总为1 提示:echo输出的速度比print快,echo ...