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伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
详解Python之unittest单元测试代码
2018/01/24 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
护士毕业生自荐信
2014/02/07 职场文书
新春寄语大全
2014/04/09 职场文书
体育教师求职信
2014/06/30 职场文书
咖啡店创业计划书
2014/08/15 职场文书
倡议书的写法
2014/08/30 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
汇报材料怎么写
2014/12/30 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书