在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动画按钮的实例教程
Nov 21 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
CSS3常见动画的实现方式
Apr 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP类的反射用法实例
2014/11/03 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php创建类并调用的实例方法
2019/09/25 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python按照多个条件排序的方法
2019/02/08 Python
python 表格打印代码实例解析
2019/10/12 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
小鞋子观后感
2015/06/05 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书