在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 相关文章推荐
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
css3 文字断裂效果
Apr 22 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
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
jquery中this的使用说明
2010/09/06 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python模糊图片过滤的方法
2018/12/14 Python
python Matplotlib模块的使用
2020/09/16 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
酒店营销策划方案
2014/02/07 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
推销搭讪开场白
2015/05/28 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android