在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 相关文章推荐
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 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里的中文变量说明
2011/07/23 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Python中列表的一些基本操作知识汇总
2015/05/20 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python简单实现区域生长方式
2020/01/16 Python
Python2与Python3的区别详解
2020/02/09 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Python的信号库Blinker用法详解
2020/12/31 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
售后客服个人自我评价
2014/09/14 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
校本培训个人总结
2015/02/28 职场文书
公司与个人合作协议书
2016/03/19 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
Python包argparse模块常用方法
2021/06/04 Python