HTML5新增元素如何兼容旧浏览器有哪些方法


Posted in HTML / CSS onMay 09, 2014

一个问题,老师抛给我们的,就是:如何让IE8-兼容这些标签?(需要设计JS中的DOM)

虽然今天刚讲的内容,但是,还是需要去了解下。

复制代码
代码如下:

<span style="font-size:14px;color:#FF6666;"> <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5新增元素在旧浏览器的兼容-HTML5自由者</title>
</head>
<body>
<header>顶部区域</header>
<nav>导航区域</nav>
<article>文章区域</article>
<footer>底部区域</footer>
</body>
</html></span>

在支持HTML5标签的浏览器显示为:

|------------------------------火狐浏览器--------------------------------------------|

|顶部区域 |

|导航区域 |

|文章区域 |

| |

|-----------------------------------------------------------------------------------------|

而在旧版的浏览器显示样式为:

------------------------------IE6浏览器--------------------------------------------
HTML5新增元素如何兼容旧浏览器有哪些方法 
------------------------------IE8浏览器--------------------------------------------
HTML5新增元素如何兼容旧浏览器有哪些方法 
都是同样的效果,没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签 具体解决办法是:

IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下:

document.createElement(‘新标签’); / /新增创建新标签

JS代码如下:

复制代码
代码如下:

<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>

或者是直接循环方式创建标签:
复制代码
代码如下:

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}

CSS样式设置默认样式:
复制代码
代码如下:

<style>
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
</style>

再者还有一种办法就是用框架的方法,用到条件注释加JS代码实现
复制代码
代码如下:

<span style="font-size:14px;color:#FF6666;"><!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]--></span>

直接加入这一句代码就可实现兼容问题,关于条件注意中的

<!--if lt IE9>

是判断是否小于IE9以下浏览器,如果是就执行这段JS代码 ,如果不是,就忽略掉。至于JS中的链接直接打开进去看看就知道了,也是一大段的代码。

HTML / CSS 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 #HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 #HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 #HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 #HTML / CSS
html5实现canvas阴影效果示例
May 07 #HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 #HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 #HTML / CSS
You might like
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
JS跨域代码片段
2012/08/30 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
javascript如何创建对象
2016/08/29 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
python条件和循环的使用方法
2013/11/01 Python
Python内建数据结构详解
2016/02/03 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
为什么使用接口?
2014/08/13 面试题
《美丽的小路》教学反思
2014/02/26 职场文书
公司活动方案范文
2014/03/06 职场文书
公路绿化方案
2014/05/12 职场文书
国际贸易求职信
2014/07/05 职场文书
六查六看自查报告
2014/10/14 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
主持人大赛开场白
2015/05/29 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
解析python中的jsonpath 提取器
2022/01/18 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
MySQL 数据 data 基本操作
2022/05/04 MySQL