让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下:
document.createElement(‘新标签’); / /新增创建新标签
方式一:Coding JavaScript
将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)
<!--[if lt IE 9]>
<script>
(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(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
方式二:使用Google的html5shiv包(推荐)
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.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])
}})()
最后在css里面加上这段:
/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状,像div那样。
好了,简单吧,一句话概括就是:引用html5.js 使html5标签成块状.
--------------------------------
参考雷锋网的源代码实例:
<!--[if lte IE 8]>
<script>
(function(){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])}})()
</script>
<![endif]-->
<参考:http://blog.csdn.net/ptyzhu/article/details/19477695 & http://www.th7.cn/web/html-css/201404/29228.shtml>
让ie浏览器支持html5新标签的解决方法(使用html5shiv)的更多相关文章
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- 支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, ...
- 让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
- ie8以下不兼容h5新标签的解决方法
HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...
- 怎样让老浏览器兼容html5新标签
CSS样式设置默认样式: <style> article, aside, canvas, details, figcaption, figure, footer, header, hgro ...
- 让低版本浏览器支持html5的标签
原理就是首先用js的createElement来创建,之后在使用 document.createElement('header'); <header> <hgroup>头部信息 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...
随机推荐
- 你知道QQ有多少人同时在线么
偶尔发现一个有意思的网站, QQ用户量这么大,那么到底有多少小伙伴同时在线呢? 以下是QQ官方的统计地址: http://im.qq.com/online/index.shtml QQ游戏玩家同时在线 ...
- CF 363B One Bomb(枚举)
题目链接: 传送门 One Bomb time limit per test:1 second memory limit per test:256 megabytes Description ...
- JS+JavaBean判断管理员增删改的操作权限
目标:用户分管理员和普通用户2种,都可以登陆,但是管理员才可以执行增删改的权限,普通用户可以看,但是执行的时候提示权限不足 帖代码片段:我只会这一种,在JSP页面判断 省略得权限数值方法: <% ...
- C#网络编程基础知识
C#网络编程基础知识一 1.IPAddress类 用于表示一个IP地址.IPAddress默认构造函数 public IPAddress(long address);一般不用 其中Parse()方法最 ...
- 捉襟见肘之message sent to deallocated instance 0x16f62a70
出现的问题(真机ios8到ios9测试没有问题,真机ios7.1出现问题): -- :::60b] *** -[ChatViewController scrollViewDidScroll:]: me ...
- Manacher算法
Manacher算法是求回文串最高效的算法,能在线性时间内求出以每一个字符为中心的最长回文串. 首先,我们都能想出$O(N^2)$求出每一个字符为中心的最长回文串的算法.那么我们考虑这样一种情况. ...
- POJ 3678 Katu Puzzle(强连通 法)
题目链接 题意:给出a, b, c 和操作类型 (与或异或),问是否满足所有的式子 主要是建图: 对于 and , c == 1: 说明 a 和 b都是1,那么 0 就不能取, a' -> a ...
- javascript undefined 和void0
underfine === void 0 并不完全成立 undefined不是关键字 不是保留字 在IE低版本下可以被赋值 所以代码中一般以void 0 代替undefined
- 条件运算符(?:)和 $""替代string.Format()
1. 条件运算符(?:)根据Boolean表达式的值返回两个值之一.表达式如下: condition ? first_expression : second_expression 2. $" ...
- 查看apt-get安装软件的版本
apt-cache search name 查询 apt-get install name 安装 dpkg dpkg dpkg-checkbuilddeps dpkg-genchanges dpkg- ...