在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实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 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/09/29 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
vue-router单页面路由
2017/06/17 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
django框架forms组件用法实例详解
2019/12/10 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
python对一个数向上取整的实例方法
2020/06/18 Python
英国假发网站:Hothair
2018/02/23 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
博士研究生自我鉴定范文
2013/12/04 职场文书
主题酒店策划书
2014/01/28 职场文书
会计专业自我鉴定
2014/02/10 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
家长高考寄语
2015/02/27 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript