在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制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
AmazeUI导航的示例代码
Aug 14 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程序实现支持页面后退的两种方法
2008/06/30 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python with statement 进行文件操作指南
2014/08/22 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
三八妇女节活动主持词
2014/03/17 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
先进人物事迹材料
2014/12/29 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
全新239军机修复记
2022/04/05 无线电
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫