您现在的位置:首页 >> 知识库 >> 内容

使用 HTML5 Shiv 让 IE 支持 HTML5

时间:2010/11/2 20:47:00 点击:

  核心提示:现在越来越多浏览器已经实现支持 HTML5,其中 iPad 上的 Safari 浏览器对 HTML5 支持就非常完美,所以我们做的iPad 导航就是完全用 HTML5 写的。  IE 无法渲染 HTM...

  现在越来越多浏览器已经实现支持 HTML5,其中 iPad 上的 Safari 浏览器对 HTML5 支持就非常完美,所以我们做的 iPad 导航就是完全用 HTML5 写的。

  IE 无法渲染 HTML5 样式

  IE 的用户完全不是我们的目标用户,但是总有人说我们网站显示的乱七八糟,很烂,因为 IE 不知道如何给不能识别的标签或者元素渲染 CSS,比如<header> 这些 IE 无法识别的标签,我们在 CSS 中定义的样式,IE 就无法渲染,所以还是决定让 iPad 导航至少在 IE 下能够布局正常一点。

  前面说了 IE 对 HTML5 标签无法识别,所以无法渲染样式,而 Sjoerd Visscher 发现一种方法可以强制 IE 渲染 HTML5 标签,当你创建一个新的 DOM 元素(名字和它无法识别的标签相同)的时候,IE 就可以渲染,并且甚至无需插入这个元素,下面 blah 就能被渲染。

<html> 
<head> 
<style>blah { color: red; }</style> 
<script>document.createElement("blah")</script> 
</head> 
<body> 
<blah>Hello!</blah> 
</body> 
</html>

  remy sharp 整理了一个迷你的脚本 html5.js,通过上面的方法让 IE 支持所有的 HTML5 标签。

  HTML5 Shiv使用

  html5.js 必须在页面head元素内调用(因为 IE 必须在元素解析前知道这个元素,所以这个 JS 文件不能在页面底部调用。)

  作者已经把js文件放在Google code project上并允许大家直接调用:http://html5shiv.googlecode.com/svn/trunk/html5.js

  可以使用IE条件注释来调用这个 JS 文件,这样像 FireFox, Safari 等非 IE 浏览器就会忽视这段代码,也就不会有无谓的 HTTP 请求了。下面这段代码仅会在IE浏览器下运行:

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

  最后大家可以看看效果 http://ipaddh.com/ 在 IE 下基本显示出来。

Tags:使用 用H HT TM 
作者:佚名 来源:不详