讓你的HTML5&CSS3網站在老IE中也能正常顯示的3種方法

webhek發表於2014-03-29
HTMLCSSS3網站

　　起初，IE其實也是一款非常有進取心的瀏覽器。但經過一段時間的蟄伏後，它已經成為了我們生活中的一道障礙。微軟現在又重新開始向其它瀏覽器發起挑戰，但事實情況是，新版的現代IE瀏覽器一直滯後於谷歌瀏覽器和火狐瀏覽器。我們還不得不想辦法相容早期的IE瀏覽器。下面提到的三種方法能快捷輕鬆的讓你的HTML5&CSS3網站在微軟的主要瀏覽器中也能神奇的執行！

　　htmlshiv.js

　　Remy開發的HTML5shiv工具能利用JavaScript在老式IE裡建立main，header，footer等HTML5元素。也就是說使用JavaScript能建立這些本來不存在的HTML5新元素。這是什麼原理？你可能花幾天也想不明白，但誰在意呢！這個指令碼幾乎是所有正式網站必用的js。

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

　　selectivizr.js

　　Selectivizr.js是一款神奇的工具，它能提供大量IE不支援的CSS選擇器和屬性，包括所有的last-child選擇器。最近在網站改版過程中，我使用了selectivizr，網站竟然可以毫不走樣的在老式IE瀏覽器的正常顯示。下面是我使用的程式碼片段：

<!--[if lte IE 8]><script src="js/libs/selectivizr.js"></script><![endif]-->

　　現代新技術WEB專案不可缺少的js庫。它只會在老式IE里載入。

　　<html>條件判斷註釋

　　你一定見到過這種極其醜陋的條件判斷註釋。然而，醜雖醜，它卻能讓你的網頁能按你希望的方式執行：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 lazy " lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 lazy " lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 lazy " lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 lazy " lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

　　這段程式碼不需要JavaScript，不需要等待JavaScript的載入，你定義的CSS樣式會立即生效起作用，沒有那種因為載入延遲而出現的樣式閃變。

　　雖然IE在奮起直追它的那些競爭對手，但現實情況是老式的IE瀏覽器仍然相當普遍，特別是在那些發展中國家。欣慰的是，上面的這些工具在所有瀏覽器裡都可以使用。

　　英文：3 Solutions for Supporting Internet Explorer

相關文章