讓低版瀏覽器顯示HTML5

引言：近年來，HTML5和CSS3技術(shù)快速興起，已經(jīng)被許多開發(fā)者定為首選標(biāo)準(zhǔn)，這些技術(shù)良好的跨平臺性能和對移動平臺的支持，為開發(fā)者帶來了極大的便利。但是有些老版本瀏覽器對這些新技術(shù)并不支持?，F(xiàn)在將筆者最近碰到的問題及解決思路與大家一起分享。

故障現(xiàn)象

筆者負(fù)責(zé)建設(shè)的網(wǎng)站，是對社會開放的一個服務(wù)性網(wǎng)站。為了給用戶帶來更好的體驗，實現(xiàn)對移動平臺的良好支持，我們決定采用HTML5+CSS3的技術(shù)方案。網(wǎng)站于2015年底上線運行。2016年6月，接到用戶反映網(wǎng)站無法訪問，提示需要升級瀏覽器，界面如圖1所示。

故障分析

這個問題在我們預(yù)料之中。當(dāng)初設(shè)計技術(shù)方案的時候，對瀏覽器的市場占有率做了調(diào)研，Net Application提供的數(shù)據(jù)顯示，2015年11月市場上占有率最高的瀏覽器 是 IE11、Chrome、IE8和IE9，IE6和IE7加起來只占有大約1.4%的份額，況且微軟在2014年就宣布停止對低版本瀏覽器的支持，強制要求用戶升級到最新版本的瀏覽器。為了能給大多數(shù)用戶提供更好的用戶體驗，我們在網(wǎng)站設(shè)計時采用了HTML5+CSS3的技術(shù)框架，沒有考慮對IE6和IE7的兼容。如果個別用戶使用了IE6或者IE7，就會顯示圖1所示界面。具體實現(xiàn)方式是在網(wǎng)頁的標(biāo)簽中加入如下語句：

圖1 提示信息

這個語句就是對客戶端瀏覽器版本做了判斷，一旦用戶使用的瀏覽器版本低于IE7，就跳轉(zhuǎn)到window.location.href=后面的鏈接。

反映網(wǎng)站無法訪問的用戶表示自己計算機基礎(chǔ)較差，不會升級瀏覽器?？紤]到現(xiàn)在還在用IE6和IE7的用戶大多數(shù)都屬于此類情形，筆者覺得有必要為此類用戶提供網(wǎng)站瀏覽服務(wù)。

故障解決

筆者將標(biāo)簽中增加的那句話去掉，然后用IE瀏覽器的開發(fā)者工具將瀏覽器模式調(diào)到IE7，發(fā)現(xiàn)網(wǎng)站首頁布局出現(xiàn)了較大的錯亂現(xiàn)象。

為了不影響IE6和IE7用戶的正常使用，筆者用HTML4重新做了一個首頁，命名為index4.html，放在網(wǎng)站根目錄下。然后在網(wǎng)站首頁的標(biāo)簽中加上如下語句：

于是IE6和IE7可以正常訪問網(wǎng)站了。

經(jīng)驗總結(jié)

IE瀏覽器的兼容性一直都是從事前端設(shè)計不可避免的問題，因為我們的網(wǎng)站具有受眾廣泛的特點，對于市場占有率較低的瀏覽器也要能做到兼容。筆者在本案例中主要解決了首頁樣式錯亂的問題，其他頁面樣式也有些問題，但是考慮到所有頁面都兼容成本太高，為少數(shù)用戶能夠提供基本的內(nèi)容瀏覽即可。