檢視不同版本IE呈現效果的好工具 SuperReview

微软针对网页设计的需求提供了Expression Studio,这套工具主要使用者为网页美工设计人员,提供了向量图片编辑、Silverlight效果制作、网页版面设计等功能。现在最新版本已经来到了第三版。

随着遵循CSS标准的IE8的出现,IE不同版本之间呈现效果的差异一直是设计人员头痛的问题。在Expression 3发表后,微软也提供了一套免费的工具来协助设计人员解决这个问题:Microsoft Expression Web 3 SuperPreview for Internet Explorer

SuperReview原本随附在Expression Web 3之中,但微软将它独立成为一个可免费下载的安装工具包。Expression Web 3中随附的版本可以比较FireFoxIE,而免费版只能比较不同版本的IE,但对于目前要导入IE8的我们,已经刚好够用了。

下图是刚刚开启的画面,可以看到预设分成左右两个窗口,你可以指定在哪个窗口用何种版本的IE来显示:

 圖一

图一

我们就选择目前AUO内部要测试的模式:68

 

图二

这个画面是以CAP的登入画面为例子,在画面中可以看到文字方块的位置有点不同,这是因为IE6Box版型设定与CSS标准有差异,而且还有些bug,造成在IE6上设计的版型到其它浏览器上却发生错乱的原因之一。

图三

你可用鼠标点选网页上的任一个元素,程序会以框框表示出两边的相对位置,让设计人员了解差异程度。

你还可以将两个画面重迭,看一下两个完整画面的整体差异,由下图的例子来看,表格定位的偏移随着画面的往下拉长而加大。

图四

点选上方工具列的Toggle Thumbnail Visibility,两个窗口右下角会显示整个画面的缩图,你可以用鼠标拖曳缩图中的方块,画面会同步移动。再点选右下角的DOM,会出现网页的原始码,让你知道目前选择的元素相对应的html码,设计人员可以依据这些检测数据找到应该要修改的地方。

图五

比起用IE8兼容性模式的切换,这个工具可以让你精准地检视不同版本IE之间呈现效果的差异,如果你在检查的过程遇到破掉的版面,请使用这个工具来协助你吧!

原文地址:https://www.cnblogs.com/Mac_Hui/p/1611742.html