最近仿的几个主题中,有几个是采用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. 2015 11 26 java 配置环境变量

    使用java软件, 须进行改变配置环境变量.需要2步. 第一,在电脑中找到配置环境变量的位置: 我的电脑,属性,高级,环境变量. 第二,进行添加两个变量,更改一个变量: 1,变量名:JAVA_HOME ...

  2. Sonar入门学习

    最近在学习Sonar,配置了好几天,才搭建起来环境,为自己的学习能力感到汗颜,赶紧在此记录一下,所谓好记性不如烂笔头. 1.Sonar介绍 Sonar是一个用于代码质量管理的开源平台,用于管理Java ...

  3. codeforces #260 DIV 2 C题Boredom(DP)

    题目地址:http://codeforces.com/contest/456/problem/C 脑残了. .DP仅仅DP到了n. . 应该DP到10w+的. . 代码例如以下: #include & ...

  4. 很郁闷,七日筑基C#第二天的内容未保存

    很郁闷,七日筑基C#第二天的内容写了好几百字未保存,刚才死机了,一下打击得不行了.

  5. html文件引入其它html文件的几种方法:include方式

    可以在一个html的文件当中读取另一个html文件的内容吗?答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下. 1.I ...

  6. 解决MySQL 一闪而过的情况

       首先进入cmd 切入MySQL的安装目录,然后切入 bin 目录 ,输入mysqld -n t --skip-grant-tables命令. 这个 cmd 窗口先不要关闭, 打开另一个窗口 登陆 ...

  7. C# 课堂总结3-语句

    一.顺序语句 二.条件,分支语句 1.if语句 关键是能够熟练运用 if的嵌套.要考虑好所有的情况. 如果说 条件是两种+情况相互对应的,那么就可以只用 if 与else .但必须要想好 每个else ...

  8. 关于Python中的yield(转载)

    您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...

  9. poj 2007 Scrambled Polygon 极角排序

    /** 极角排序输出,,, 主要atan2(y,x) 容易失精度,,用 bool cmp(point a,point b){ 5 if(cross(a-tmp,b-tmp)>0) 6 retur ...

  10. C语言(1)--准备

    经过很长一段时间的准备,终于重新弄懂了一些C语言的问题,再次熟悉了C语言的大致应用,对此略有体会,在此以博客记录于此! 准备工作: 运行平台:Linux 编辑工具:vim (还可以使用emac,ged ...