HTML5+CSS3網(wǎng)站能在IE8瀏覽器正常顯示的方法

2014-11-28 17:52:34來(lái)源:WEB駭客作者:

起初,IE其實(shí)也是一款非常有進(jìn)取心的瀏覽器。但經(jīng)過(guò)一段時(shí)間的蟄伏后,它已經(jīng)成為了我們生活中的一道障礙。下面提到的三種方法能快捷輕松的讓你的HTML5&CSS3網(wǎng)站在微軟的主要瀏覽器中也能神奇的運(yùn)行!

起初,IE其實(shí)也是一款非常有進(jìn)取心的瀏覽器。但經(jīng)過(guò)一段時(shí)間的蟄伏后,它已經(jīng)成為了我們生活中的一道障礙。微軟現(xiàn)在又重新開(kāi)始向其它瀏覽器發(fā)起挑戰(zhàn),但事實(shí)情況是,新版的現(xiàn)代IE瀏覽器一直滯后于谷歌瀏覽器和火狐瀏覽器。我們還不得不想辦法兼容早期的IE瀏覽器。下面提到的三種方法能快捷輕松的讓你的HTML5&CSS3網(wǎng)站在微軟的主要瀏覽器中也能神奇的運(yùn)行!

htmlshiv.js

Remy開(kāi)發(fā)的HTML5shiv工具能利用JavaScript在老式IE里創(chuàng)建main,header,footer等HTML5元素。也就是說(shuō)使用JavaScript能創(chuàng)建這些本來(lái)不存在的HTML5新元素。這是什么原理?你可能花幾天也想不明白,但誰(shuí)在意呢!這個(gè)腳本幾乎是所有正式網(wǎng)站必用的js。

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

selectivizr.js

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

<!--[if lte IE 8]><script src="js/libs/selectivizr.js"></script><![endif]-->
現(xiàn)代新技術(shù)WEB項(xiàng)目不可缺少的js庫(kù)。它只會(huì)在老式IE里加載。

<html>條件判斷注釋

你一定見(jiàn)到過(guò)這種極其丑陋的條件判斷注釋。然而,丑雖丑,它卻能讓你的網(wǎng)頁(yè)能按你希望的方式運(yùn)行:

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

這段代碼不需要JavaScript,不需要等待JavaScript的加載,你定義的CSS樣式會(huì)立即生效起作用,沒(méi)有那種因?yàn)榧虞d延遲而出現(xiàn)的樣式閃變。

雖然IE在奮起直追它的那些競(jìng)爭(zhēng)對(duì)手,但現(xiàn)實(shí)情況是老式的IE瀏覽器仍然相當(dāng)普遍,特別是在那些發(fā)展中國(guó)家。欣慰的是,上面的這些工具在所有瀏覽器里都可以使用。

關(guān)鍵詞:HTML5CSS3IE8