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之间呈现效果的差异,如果你在检查的过程遇到破掉的版面,请使用这个工具来协助你吧!

  • 相关阅读:
    优化网站设计(一):减少请求数
    ASP.NET MVC 计划任务(不使用外接程序,.net内部机制实现)
    ASP.NET MVC 母版页
    ASP.NET MVC 系统过滤器、自定义过滤器
    大流量网站的底层系统架构分析
    如何开发高性能低成本的网站之技术选择
    使用Sqlserver事务发布实现数据同步(sql2008)_Mssq l数据库教程
    xpath路径表达式
    减负!云端编译构建,这样让你的开发省时省力……
    SVN如何迁移到Git?
  • 原文地址:https://www.cnblogs.com/Mac_Hui/p/1611742.html
Copyright © 2011-2022 走看看