首页 技术 正文
技术 2022年11月21日
0 收藏 489 点赞 2,816 浏览 1921 个字

最近仿的几个主题中,有几个是采用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>

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,997
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,511
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,356
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,139
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,770
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,848