zoukankan      html  css  js  c++  java
  • 檢視不同版本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之间呈现效果的差异,如果你在检查的过程遇到破掉的版面,请使用这个工具来协助你吧!

  • 相关阅读:
    面试C#需要准备的一些基础
    学习jQuery(一),做的第一个可拖动列的Grid
    面试的两道SQL题
    SSIS ODBC方式连接mysql数据库的一个问题
    WIN7下A卡解决部分游戏(CS、CF等)无法全屏问题
    显示Deprecated: Assigning the return value of new by reference is deprecated in解决办法
    Eclipse 中文插件的安装
    安装NASM for Linux
    将Eclipse中文注释字体变大方法
    如何查看局域网内所有IP
  • 原文地址:https://www.cnblogs.com/Mac_Hui/p/1611742.html
Copyright © 2011-2022 走看看