兼容不同浏览器的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.

作者简介：杨继春，硕士，成都东软学院教师，研究方向：美术学。