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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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的FTP学习(三)
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
利用python爬取有道词典的方法
2020/12/08 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
铁路工务反思材料
2014/02/07 职场文书
《颐和园》教学反思
2014/02/26 职场文书
副总经理岗位职责
2014/03/16 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
银行求职自荐信
2014/06/30 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS