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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
destoon常用的安全设置概述
2014/06/21 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python读取键盘输入的2种方法
2015/06/16 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
低碳生活的宣传标语
2014/06/23 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
财务人员岗位职责
2015/02/03 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android