缺陷标题 到此一游→电子刻字，单击电子刻字，底部展示图片在不同浏览器显示不同。

测试平台与浏览器 Windows 10+IE 11或Chrome或Firefox。

测试步骤

（1）打开智慧绍兴网站http://www.roqisoft.com/zhsx。

（2）单击导航条中的“到此一游”。

（3）单击电子刻字→体验电子刻字，将页面拉至底端。

期望结果 界面所有元素在所有浏览器显示都相同。

实际结果 页面底端图片在不同浏览器显示不相同，如图2-20～图2-22所示。

专家点评

前端开发工程师经常会遇到在代码相同的情况下，IE与Firefox和Chrome显示不同。有些功能在一个浏览器上能实现，在另一个浏览器上却不能实现。

前端开发工程师常用的解决方案如下。

（1）垂直居中问题。在导航条中，IE中文本向上显示，这是因为没有设置行高而导致的不兼容，解决方法是将line-height的值设置得和height一样，同时设置vertical-align:middle，问题就可解决。

（2）圆角问题。经常会在IE 9以下的浏览器中看到一些网站的轮播图下面的光圈显示为正方形，没有圆角，这是因为border-radius这个元素只在IE 9+、Firefox 4+、Chrome、Safari 5+以及Opera中得到支持，要想解决这个问题只能通过JavaScript。

（3）解决IE 8的兼容性。

X-UA-Compatible是针对IE 8新加的一个设置，只有IE 8能识别，而edge是模式通知IE以最高级别的可用模式显示内容，实际上破坏了锁定模式。

无论页面是否包含 !DOCTYPE 指令，均使用IE 7的标准渲染模式。

EmulateIE7模式通知IE使用 !DOCTYPE 指令确定如何呈现内容。标准模式指令以IE 7标准模式显示，而Quirks模式指令以IE 5模式显示。与IE 7模式不同，EmulateIE7模式遵循 !DOCTYPE 指令。对于多数网站来说，它是首选的兼容性模式。

当然，这些需要不断地积累。遇到兼容的问题，可以主动去网上查询解决方案。 T4BQ2h/HA05/ja7R6p3gCqHjL1COTrga5dpI9m8cBOV+BQ7ZUwlr263MevkGXpD1