使用 HTML5 Shiv 讓 IE 支持 HTML5

發布時間: 2010-11-02 20:47  閱讀: 1893 次  推薦: 0   原文鏈接   [收藏]  

  現在越來越多瀏覽器已經實現支持 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 下基本顯示出來。

0
0
 
標簽:HTML5
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()