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