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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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企业级应用之常见缓存技术篇
2011/01/27 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
javascript测试题练习代码
2012/10/10 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
用Python写冒泡排序代码
2016/04/12 Python
Python创建xml文件示例
2017/03/22 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
学python最电脑配置有要求么
2020/07/05 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
四年级评语大全
2014/04/21 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
给病人的慰问信
2015/03/23 职场文书
自信主题班会
2015/08/14 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python