兼容不同瀏覽器的WEB用戶體驗設計研究

摘 要：當今時代是信息化時代，互聯網發展迅速，人們生活也越來越離不開網絡。因此，與互聯網相關的科技也應運而生，與數字媒體相關的用戶體驗設計也得以推廣。本文是作者根據自己多年WEB設計經驗總結出的較簡易解決方案，以便能解決常用瀏覽器兼容問題而達到良好用戶體驗。

關鍵詞：瀏覽器；兼容；用戶體驗；WEB設計

也許是不斷探索，并急于求成和急功近利的緣故，新技術產品往往總是在不成熟或不完全成熟的狀態下就開始推廣使用。因此，在使用過程中人們不得不花大量的時間去找問題的原因并解決問題。

隨著，瀏覽器的種類越來越多，往往同樣的網頁在不同瀏覽器中的用戶體驗是大相徑庭的，瀏覽器兼容問題已成為WEB設計制作和開發者非常棘手的問題。

瀏覽器種類雖多，但目前常用瀏覽器內核只有四種：以IE為代表的Triden；以Firefox為代表的Gecko；以Safari、Chrome為代表的Webkit；以Opera為代表的Presto。復雜問題簡單化，我們只要解決了這四種內核的四種代表瀏覽器就基本解決了所有瀏覽器。

先看IE，低版IE用戶還比較多，主要是IE8，可利用IE11開發人員工具的仿真功能的文檔模式來測試IE不同版本。IE11默認為Edge模式，一方面，想兼容Microsoft Edge；另一方面，通知IE以最高級別的可用模式渲染。IE8及以下版用Quirks模式時導致頁面錯亂，可用使IE8及以下版用標準模式渲染。還可用適合IE的判斷法：<！--[if lte IE 8]>（≤IE8）樣式2<！[endif]-->，但樣式2與樣式1（≥IE9）所指Class或Id名不能重復，否則加上@media screen and（min-width：0px）{樣式1}，因為≤IE8不識別此法。以此方法，你可任意定義IE8及以下版達到想要的視覺效果。類似判斷如：<！--[if IE 6]>IE6<！[endif]-->；<！--[if gte IE 6]>≥IE6<！[endif]-->；<！--[if IE]>≤IE9<！[endif]-->；<！--[if ！IE]><！-->≤IE9<！--<！[endif]-->。另外，可單獨設IE8：@media＼0screen{IE8}，IE7：*：first-child+html .選擇器{IE7}，*+html .選擇器{IE7}，body*.選擇器{IE7}，IE6：html > body .選擇器{IE6}。不正確的Doctype聲明，可導致不正確顯示或不顯示，Html5寫為<！DOCTYPE HTML>，在IE中，有時可用<！DOCTYPE >代替<！DOCTYPE HTML>而解決。

接下看Firefox，Firefox可識別語句：@-moz-document url-prefix（）{樣式}。去掉點擊時虛線框：在IE下可用Outline：none，但Firefox不支持，在Firefox下可用：：-moz-focus-inner，注意是兩冒號，寫法如：#button1：：-moz-focus-inner {border： none；}。

再看Chrome，Chrome如下：@media screen and （-webkit-min-device-pixel-ratio：0）{樣式}，常用Position：absolute定位。其中，當left/right/top/bottom的值為負時，在IE和Firefox中有遮蓋現象，而Chrome不會，這時需對left/right/top/bottom設置不同值。Safari也可用@media screen and （-webkit -min-device-pixel-ratio：0）{樣式}來區別其他，還可用：.選擇器{ [；屬性：值；]；}（Safari≤7）或同時@media ＼＼0 screen {樣式}（Safari≥7），還可用@media screen{@media（min-width：0px）{樣式}}（Safari≤6）。

最后看Opera，@media all and （min-width：0）{.選擇器{屬性：值1}}可把Chrome及Opera和其他分開，二者繼續區分可用覆蓋法：同時加@media screen and （-webkit-min-device-pixel-ratio：0）{.選擇器{屬性：值2}}來覆蓋前者，值1取Opera所需，值2取Chrome所需。還可用：@supports （-webkit-appearance：none） {}（Opera≥14），@media all and （-webkit-min-device -pixel-ratio：10000）， not all and （-webkit-min-device-pixel-ratio：0） {}（Opera≤11）。

符合用戶體驗設計的常用規律是居中對齊，下面是兼容的居中方法：DIV內文居中用vertical-align：middle；結合line-height：DIV高，DIV垂直居中：DIV{Position：Absolute；Top： 50%；Left：50%；margin：-DIV高/2 0 0 -DIV寬/2；Width：DIV寬；Height：DIV高；}，DIV水平居中：body居中（text-algin： center；）+DIV居中（margin-left：auto；margin-right：auto；），內DIV對外DIV居中：外DIV（text-algin：center；）+內DIV（margin：0 auto；）。

由于瀏覽器種類越來越多，WEB標準也在不斷地更新變化，我們要坦然面對，當今時代是信息化時代，互聯網發展迅速，與數字媒體相關的用戶體驗設計，也得以推廣和重視，我們只有不斷學習，不斷在實踐中積累經驗，不斷提高自己找到解決問題的新方法的實踐和創新能力，我們才能跟上并超越這個時代。

參考文獻：

[1] Smashing（德）.Web用戶體驗設計與可用性測試[M].人民郵電出版社，2014.

[2] 昂格爾（美）. UX設計——以用戶體驗為中心的Web設計[M].人民郵電出版社，2015.

作者簡介：楊繼春，碩士，成都東軟學院教師，研究方向：美術學。