- 软件测试实验实训指南
- 陈英
- 692字
- 2025-02-20 12:13:11
2.16 实验#16：智慧绍兴－刻字－图片显示问题
缺陷标题 到此一游→电子刻字，单击电子刻字，底部展示图片在不同浏览器显示不同。
测试平台与浏览器 Windows 10+IE 11或Chrome或Firefox。
测试步骤
（1）打开智慧绍兴网站http://www.roqisoft.com/zhsx。
（2）单击导航条中的“到此一游”。
（3）单击电子刻字→体验电子刻字，将页面拉至底端。
期望结果 界面所有元素在所有浏览器显示都相同。
实际结果 页面底端图片在不同浏览器显示不相同，如图2-20～图2-22所示。
图2-20 Firefox展示能左右滚动
图2-21 Chrome浏览器展示能左右滚动
图2-22 IE11浏览器只显示一张图片并不断改变当前图片
专家点评
前端开发工程师经常会遇到在代码相同的情况下，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指令。对于多数网站来说，它是首选的兼容性模式。
当然，这些需要不断地积累。遇到兼容的问题，可以主动去网上查询解决方案。