让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签。考虑到目前win7自带的IE浏览器版本是IE8，而IE8不支持HTML语义化新标签,所以有必要对HTML5新标签进行兼容，所谓兼容,主要是让这些html5标签显示为块级元素, 并且使低版本的浏览器认为它们是标签。为此我们需要在页面中添加一个HTML5 shiv插件, 它的作用是调用document.createElement将所有HTML5新标签重新生成,低版本IE浏览器再遇到html5新标签时,将其解析为标签。
考虑到IE9是支持html5的，所以要对IE浏览器的版本进行判断，只有IE9以下的版本才执行此脚本。
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
此插件的内容如下所示:
(function(){if(!/*@cc_on!@*/0)return;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(','),i=e.length;while(i--){document.createElement(e[i])}})()
注意:要将这段代码放到head而不是body后面,因为浏览器是从上到下对html代码进行执行和解析的,在页面渲染之后再执行HTML5 shiv脚本就没有意义了.
此外,head部分的css里面应加上这段,是html5新标签显示为块级元素：
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;}
完整的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>让旧浏览器支持HTML5新增标签</title>
<style type="text/css">
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
</style>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header>顶部内容</header>
<nav>导航内容</nav>
<article>文章内容</article>
<footer>底部内容</footer>
</body>
</html>
让IE6,7,8支持HTML5新标签的方法的更多相关文章
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- 支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- 如何处理HTML5新标签的兼容性问题
支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...
- HTML5新标签的兼容性处理
普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
- HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...
- 如何处理HTML5新标签的浏览器兼容性问题？
① IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签 ② 也可以使用成熟的框架 ex:html5shim &l ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
随机推荐
- 9.13noip模拟试题
题目名称 “与” 小象涂色 行动!行动! 输入文件 and.in elephant.in move.in 输出文件 and.out elephant.in move.in 时间限制 1s 1s 1s ...
- 怎么在后台修改前台html页面的key、title、description
public void UpdateMeta(string title, string keyword, string desc) { ; i >= ; i--) { if (this.Head ...
- VB指针 与CopyMemory
体会ByVal和ByRef Dim k As Long CopyMemory ByVal VarPtr(k), 40000, 4 等同于k=40000:从保存常数40000(缺省ByRef)的临时变量 ...
- dede织梦后台页面及功能修改及精简操作方法
先让我们来看看都有哪些页面控制着后台的功能和显示.下方为系统默认的后台界面图,为了便于下面的说明我对各个部分进行了一些标示.共A.B.C.D.E五个区域. 常用:A区域[顶部LOGO行]对应文件:/d ...
- Asp.net 事务处理
事务处理是在数据处理时经常遇到的问题,经常用到的方法有以下三种总结整理如下:方法1:直接写入到sql 中在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRA ...
- 更新Xcode7 后 .dylib变成了.tbd的问题解决
拿添加libsqlite3.dylib为例 1.打开你添加的libsqlite3.tbd 文本文件,然后有一行 install-name: /usr/lib/libsqlite3.dylib ...
- javaScript 手写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- centos yum
1.介绍 yum(全 称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器 ...
- Hibernate中session的产生的方式
* session的产生的方式 * 1. sessionFactory.openSession 每次都会新创建一个session,只要新创建一个session,hiber ...
- openstack nova数据库计算结点IP地址
最近遇到一个问题就是在控制结点上查找nova数据库中 select * from compute_nodes\G;中出现IP地址一直是127.0.0.1不是计算结点的IP,就算修改成计算结点的IP,也 ...