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