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中背景尺寸background-size详解
Sep 02 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
javascript操作css属性
2013/12/30 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
财务会计应届生求职信
2013/11/24 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
单位提档介绍信
2014/01/17 职场文书
初三学习决心书
2014/03/11 职场文书
董存瑞观后感
2015/06/11 职场文书
体育教师研修感悟
2015/11/18 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书