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

故障現(xiàn)象

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

故障分析

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

圖1 提示信息

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

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

故障解決

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

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

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

經(jīng)驗(yàn)總結(jié)

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