摘 要：當(dāng)今時(shí)代是信息化時(shí)代，互聯(lián)網(wǎng)發(fā)展迅速，人們生活也越來越離不開網(wǎng)絡(luò)。因此，與互聯(lián)網(wǎng)相關(guān)的科技也應(yīng)運(yùn)而生，與數(shù)字媒體相關(guān)的用戶體驗(yàn)設(shè)計(jì)也得以推廣。本文是作者根據(jù)自己多年WEB設(shè)計(jì)經(jīng)驗(yàn)總結(jié)出的較簡易解決方案，以便能解決常用瀏覽器兼容問題而達(dá)到良好用戶體驗(yàn)。

關(guān)鍵詞：瀏覽器；兼容；用戶體驗(yàn)；WEB設(shè)計(jì)

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

隨著，瀏覽器的種類越來越多，往往同樣的網(wǎng)頁在不同瀏覽器中的用戶體驗(yàn)是大相徑庭的，瀏覽器兼容問題已成為WEB設(shè)計(jì)制作和開發(fā)者非常棘手的問題。

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

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

接下看Firefox，F(xiàn)irefox可識別語句：@-moz-document url-prefix（）{樣式}。去掉點(diǎn)擊時(shí)虛線框：在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定位。其中，當(dāng)left/right/top/bottom的值為負(fù)時(shí)，在IE和Firefox中有遮蓋現(xiàn)象，而Chrome不會，這時(shí)需對left/right/top/bottom設(shè)置不同值。Safari也可用@media screen and （-webkit -min-device-pixel-ratio：0）{樣式}來區(qū)別其他，還可用：.選擇器{ [；屬性：值；]；}（Safari≤7）或同時(shí)@media ＼＼0 screen {樣式}（Safari≥7），還可用@media screen{@media（min-width：0px）{樣式}}（Safari≤6）。

最后看Opera，@media all and （min-width：0）{.選擇器{屬性：值1}}可把Chrome及Opera和其他分開，二者繼續(xù)區(qū)分可用覆蓋法：同時(shí)加@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）。

符合用戶體驗(yàn)設(shè)計(jì)的常用規(guī)律是居中對齊，下面是兼容的居中方法：DIV內(nèi)文居中用vertical-align：middle；結(jié)合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；），內(nèi)DIV對外DIV居中：外DIV（text-algin：center；）+內(nèi)DIV（margin：0 auto；）。

由于瀏覽器種類越來越多，WEB標(biāo)準(zhǔn)也在不斷地更新變化，我們要坦然面對，當(dāng)今時(shí)代是信息化時(shí)代，互聯(lián)網(wǎng)發(fā)展迅速，與數(shù)字媒體相關(guān)的用戶體驗(yàn)設(shè)計(jì)，也得以推廣和重視，我們只有不斷學(xué)習(xí)，不斷在實(shí)踐中積累經(jīng)驗(yàn)，不斷提高自己找到解決問題的新方法的實(shí)踐和創(chuàng)新能力，我們才能跟上并超越這個(gè)時(shí)代。

參考文獻(xiàn)：

[1] Smashing（德）.Web用戶體驗(yàn)設(shè)計(jì)與可用性測試[M].人民郵電出版社，2014.

[2] 昂格爾（美）. UX設(shè)計(jì)——以用戶體驗(yàn)為中心的Web設(shè)計(jì)[M].人民郵電出版社，2015.

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