讓低版瀏覽器顯示HTML5

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

故障現象

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

故障分析

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

圖1 提示信息

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

反映網站無法訪問的用戶表示自己計算機基礎較差，不會升級瀏覽器。考慮到現在還在用IE6和IE7的用戶大多數都屬于此類情形，筆者覺得有必要為此類用戶提供網站瀏覽服務。

故障解決

筆者將標簽中增加的那句話去掉，然后用IE瀏覽器的開發者工具將瀏覽器模式調到IE7，發現網站首頁布局出現了較大的錯亂現象。

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

于是IE6和IE7可以正常訪問網站了。

經驗總結

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