浏览器
双核浏览器
游戏浏览器
高速浏览器
视频浏览器
IE浏览器
浏览器周边
手机浏览器
安卓游戏
音乐舞蹈
养成游戏
角色扮演
策略塔防
休闲益智
动作冒险
飞行射击
模拟经营
体育运动
赛车竞速
网络游戏
安卓软件
资讯阅读
生活服务
影音播放
购物理财
效率办公
趣味娱乐
交通出行
学习教育
摄影图像
在线音乐
网络购物
聊天工具
安全杀毒
图片编辑
新闻资讯
软件资讯
游戏资讯
手机教程
手游攻略
游戏攻略
软件教程
IE专区
IE动态
IE相关
IE技巧
IE修复
专区
文章合集
软件
游戏
浏览器
安卓专题
软件
游戏
浏览器

让IE支持HTML5的方法有哪些?IE支持HTML5方法推荐

2019-07-10 15:31 编辑:匿名

越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个:

1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。

2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。

针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:

让IE支持HTML5的方法有哪些?IE支持HTML5方法推荐

下面是一些补充:

当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。

以下是在的IE 8显示的例子,未作处理前:

让IE支持HTML5的方法有哪些?IE支持HTML5方法推荐

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE在对象中创建对应的节点。

让IE支持HTML5的方法有哪些?IE支持HTML5方法推荐

添加以上代码后,在IE8中显示的效果如下:

让IE支持HTML5的方法有哪些?IE支持HTML5方法推荐

sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。

演示如下

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<!-- simplified version; works on legacy browsers -->

<title>Basic styling of new structural tags</title>

<style>

*{margin:0;padding:0;}

body {background-color:white; color: black; text-align:center;}

header, footer, nav, section, article {display:block;}

header {width:100%; background-color:yellow;}

nav {width:30%; background-color:orange;float:left;}

section {width:65%; background-color:SpringGreen ; float:right;}

article {width:70%; margin:2em 10%; background-color:turquoise;}

footer {width:100%; background-color:pink; clear:both;}

</style>

<!--[if IE]>

<script>

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,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])}})()

</script>

<![endif]-->

<body>

<header><h1>Hello</h1></header>

<nav><p>Menu</p></nav>

<section>

<p>Section</p>

<article><p>article 1</p></article>

<article><p>article 2</p></article>

</section>

<footer><p>The footer</p></footer>

</body>

</html>

让IE支持HTML5的方法有哪些?IE支持HTML5方法推荐

HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素,如下例:

让IE支持HTML5的方法有哪些?IE支持HTML5方法推荐


IE修复

相关推荐

专题推荐

浏览器更新