在IE6系列等老式浏览器中使用HTML5的新标签实现方案


Posted in HTML / CSS onDecember 25, 2012

HTML5 向开发人员提供了很多新的标签, 如 section, nav, article, header 和 footer 等. 这些标签语义化程度高, 会被经常使用, 但在 IE6, IE7, IE8 和 Firefox 2 等老式浏览器中不能识别和正常使用.

为什么老式的浏览器不能识别这些标签?

其实错不在浏览器, 因为在那个时代根本不存在这种标签, 所以不能正确识别出来, 而这种不寻常的标签识别令 DOM 结构变得异常.

我们有测试代码如下. 是一个文章标题和蓝色字的文章内容, 其中文章内容用了 article 标签.

复制代码
代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>测试</title>
<style>
article{color:#06F;}
</style>
</head>

<body>
<h1>文章标题</h1>
<article>
这是文章内容,应该是一段蓝色的文字。在老式浏览器中,如果不做 hack 将显示异常。
</article>
</body>
</html>


在 IE8 中, 显示如下.

在IE6系列等老式浏览器中使用HTML5的新标签实现方案

IE8 不能识别 article 标签, 定义在标签上的 CSS 样式没有起作用. 在 IE8 中, <article> 被解释成命名为 <article /></article /> 两个空的标签元素, 与文章内容并列为兄弟节点, 如下图.

在IE6系列等老式浏览器中使用HTML5的新标签实现方案

如何在老式浏览器中使用 HTML5 标签?

既然因为不能识别标签而不能使用, 解决办法就是让标签被识别出来. 所幸, 简单地通过 document.createElement(tagName) 即可以让浏览器识别标签和 CSS 引擎知道该标签的存在. 假设我们上面的例子的 <head> 区域加上如下代码.

复制代码
代码如下:

<script>
document.createElement('article');
</script>

IE8 中的 DOM 解释就会变成下图所示.

在IE6系列等老式浏览器中使用HTML5的新标签实现方案

自然, 文字也显示成正常的蓝色.

在IE6系列等老式浏览器中使用HTML5的新标签实现方案

结语

博客早就转用 HTML5 的写法, 但苦于很多用户没有用最新的浏览器, 一直还在用 HTML4 的标签集. HTML5 很多标签语义化强而且实用, 我也开始尝试一些常用的标签了, 现在用上了 article 和 time 标签.

HTML / CSS 相关文章推荐
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 #HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 #HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 #HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 #HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 #HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 #HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 #HTML / CSS
You might like
德生H-501的评价与改造
2021/03/02 无线电
用函数读出数据表内容放入二维数组
2006/10/09 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
vue项目接口域名动态获取操作
2020/08/13 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
python奇偶行分开存储实现代码
2018/03/19 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python实现抽奖小程序
2020/04/15 Python
python3字符串操作总结
2019/07/24 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python属性和内建属性实例解析
2020/01/14 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
销售合作意向书范本
2015/05/08 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
如何拟写通知正文?
2019/04/02 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP