转: 让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处理 ...
随机推荐
- 【D3.V3.js系列教程】--（十二）坐标尺度
[D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...
- ubuntu 14.04设备flash媒体播放器
今天是2014年4一个月19日本,就在两天前公布 ubuntu 14.04版本号, 以今天的优势是星期六,西安小雨,所以折腾linux. 我是个有点linux基础的小白.说是有些基础是由于以前在上大学 ...
- curl向web服务器发送json数据
c++使用libcurl: /* *g++ demo.cpp -g -Wall -lcurl */ #include <string.h> #include <stdlib.h> ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
- 用jersey ＋ spring 实现rest服务及单元测试
jersey提供了强大的rest功能,可以通过简洁的标注和编码实现业务的需求,架构会透明的把你的pojo对象转化为客户端可以接受的json/xml文件模式,当然也可以用它做一些基于ajax的表单提交和 ...
- NGUI Button 3中点击事件的触发
NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,点击按钮触发的方法名必须为OnClick,当 ...
- [Jobdu] 题目1385：重建二叉树
根据一棵二叉树的先序遍历和后序遍历,重建二叉树 例子: 我们先来看一个例子,二叉树如上图,则先序遍历为:1 2 4 7 3 5 6 8,中序遍历为:4 7 2 1 5 3 8 6 思路: 先序遍历中的 ...
- Maven+SpringMVC+MyBatis 上传图片
上传文件我一直都觉得很难,好吧,所有涉及文件操作的我都觉得不容易.然后今天尝试了从网页上传图片保存到服务器.这个例子的前提是搭建好了服务器端框架:Maven+Spring MVC+MyBatis.当然 ...
- python实现进度条
先说一下文本系统的控制符: \r: 将光标移动到当前行的首位而不换行: \n: 将光标移动到下一行,并不移动到首位: \r\n: 将光标移动到下一行首位. 环境: root@ubuntu16:/ale ...
- [LeetCode]题解（python）：130-Surrounded Regions
题目来源: https://leetcode.com/problems/surrounded-regions/ 题意分析: 给定给一个二维的板,这个板只包括‘X’和‘O’.将被‘X’包围的‘O’变成‘ ...