在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 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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 split()函数的用法详解
2013/06/05 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python线程同步的实现代码
2018/10/03 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python 一维二维插值实例
2020/04/22 Python
python爬虫用mongodb的理由
2020/07/28 Python
基于Python正确读取资源文件
2020/09/14 Python
Python爬取某平台短视频的方法
2021/02/08 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
幼教个人求职信范文
2013/12/02 职场文书
低碳环保演讲稿
2014/08/28 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
团代会邀请函
2015/02/02 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript