第一篇:有关JS兼容性的工作总结
关于JS兼容性的总结
在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Firefox的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。
JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需要判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。
在不同的浏览器中对js的支持程度,语法要求都不大一样!在网上查寻资料,我目前暂时认识比较好的判断代码如下:
function getOs()
{
var OsObject = “";
if(navigator.userAgent.indexOf(”MSIE“)>0){
return ”MSIE“;
}
if(isFirefox=navigator.userAgent.indexOf(”Firefox“)>0){
return ”Firefox“;
}
if(isSafari=navigator.userAgent.indexOf(”Safari“)>0){
return ”Safari“;
}
if(isCamino=navigator.userAgent.indexOf(”Camino“)>0){
return ”Camino“;
}
if(isMozilla=navigator.userAgent.indexOf(”Gecko/“)>0){
return ”Gecko“;
}
}
alert(”您的浏览器类型为:“+getOs());
因此在扩展的代码中首先要对浏览器进行了判断,判断它是否为Firefox,我添加的代码语句为:
FF=(navigator.userAgent.indexOf(”Firefox“)>0)?true:false;然后对初始状态进行设置,在W3C标准下,兼容FF的写法,在initIt()方法中扩展了: else{
tempColl = document.getElementsByTagName(”DIV“);
for(i=0;i if(tempColl[i].className == ”child“) tempColl[i].style.display = ”block“; } } 然后扩展到FF,function expandFF(el){ whichEl = document.getElementById(el + ”Child“);var event=getEvent();//调用方法得到event事件对象 whichIm = event.target;if(whichEl.style.display == ”none“){ whichEl.style.display = ”block“; whichIm.src = ”images/line_title.gif“;} else { whichEl.style.display = ”none“; whichIm.src = ”images/hdclose.gif“;} event.cancelBubble = true;} 其中,对event事件这里以方法的形式来调用: //得到EVENT对象 function getEvent(){ if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event||arg0.constructor==MouseEvent)||(typeof(arg0)==”object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func=func.caller; } return null;} 解释AJAX? Ajax的全称是:AsynchronousJavaScript+XML Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。 Ajax(AsynchronousJavaScriptandXML)是结合了Java技术、XML以及JavaScript等编程技术,可以让开发人员构建基于Java技术的Web应用,并打破了使用页面重载的惯例。 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。 ajax有什么组成,各组件作用是什么? 由JavaScript、CSS、DOM、XMLHttpRequest组成。JavaScript:将所有的东西绑定在一起。CSS:级联样式表 DOM:进行动态显示及交互。 XMLHttpRequest:进行异步数据查询、检索。 写出ajax的编程六步骤? 触发一个事件 创建一个XMLHttpRequest请求 设置回调函数 打开一个链接open()发送请求 send()编写处理请求函数(回调函数) ajax中向服务器发送消息的get和post有什么区别? get:参数以URL方式进行提交,参数用来提交给服务器看,需要服务器端主动拿取。get不安全,而且URL长度有限制,编码问题也会出现。 post:参数包含在请求体中提交,服务器端直接从请求中获得数据。 写出AJAX中处理从服务器得到的数据的两种方式?(1)以文本字符串的方式返回服务器的响应 (2)以XMLDocument对象方式返回响应 什么是 JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式,但是也使用了类似于高级语言的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。 写出JSON的具体形式? 1)对象是一个无序的“‘名称/值’对”集合。一个对象以“{”开始,以“}”结束。每个“名称”后跟一个“:”,“‘名称/值’对”之间使用“,”分隔。 2)数组是值(value)的有序集合。一个数组以“[”开始,“]”结束。值之间使用“,”分隔。 3)值(value)可以是双引号括起来的字符串(String)、数值(number)、true、false、null、对象(object)或者数组(array)。这些结构可以嵌套。 4)字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜体转义。一个字符(character)即一个单独的字符串(characeter string).写出JSON 的构建的结构? 采访里:2012-3-1播出日:2012-3-1 记者:胡莉 董松通讯员:邓苗苗 【标题】 中宣部等举行“弘扬雷锋精神,开展志愿服务”视讯会议武汉设分会场。 【口播】 中宣部、中央文明办今天上午举行“弘扬雷锋精神,开展志愿服务”视讯会议,武汉设分会场。 March 5th is China’s Moral Model Lei Feng’s birthday.A series of activities to promote voluntary service will be launched this month.A nationwide tele-conference was held this morning to organize related activities.【画外】 中宣部常务副部长、中央文明办主任雒树刚就充分认识开展志愿服务的重大意义、大力普及志愿服务理念和开展关爱他人、关爱社会、关爱自然的三关爱活动发表讲话。 雒树刚说,社会志愿服务也是雷锋精神的载体。应以传承和弘扬雷锋精神为主题,以青少年为重点,广泛开展学雷锋实践和社会志愿服务,广泛普及爱国、敬业、诚信、友善的基本道德规范,从而推动学雷锋活动常态化、机制化,形成大家都来弘扬雷锋精神,大家都来争做好人、多做好事,追求美好道德,形成我为人人、人人为我的良好氛围。 教育部、文化部、全国总公会、共青团中央、全国妇联、中国残联、中国红十字会等单位代表发言,汇报各自对雷锋精神的理解和志愿活动安排。 视讯会后,武汉市文明办主任严宏向与会者通报了近期21项“学雷锋、三关爱”志愿服务活动安排。3月,各区、各级学校、行业窗口、文化战线将推出系列活动,关爱帮扶空巢老人、留守儿童、农民工和残疾人士。 [Gist] Mr.Luo Shugang, the deputy minister of the Propaganda Department of the CPC Central Committee, gave a speech on the “Three Care” activity, “Care about others, society and the environment”, as well as on the importance and significance of volunteer service.Mr.Yanhong, the director of the Wuhan Civilization Office, gave a report on volunteer service arrangements planned for the coming months.Single seniors, orphaned children, migrant workers and the disabled will be the first groups to benefit from volunteer services in March. 网页兼容性测试 Web兼容性测试主要是针对不同的操作系统平台,浏览器,以及分辨率进行的测试。由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题。因此我们就需要对Web网页进行兼容性测试。对于web应用,我们无法预计用户的客户端配置和运行环境。所以,做好兼容性测试是非常重要的。 1.1.操作系统兼容性测试 常见的操作系统有Windows,Unix,Linux等,对于普通用户来讲,最常用的是Windows操作系统。Windows操作系统包括Windows XP,windows 2003,vista,Win2000/NT,Windows9x等等。 1.2.浏览器兼容性测试 浏览器是Web系统中最核心的组成构件,来自不同厂家的浏览器对Javascript、ActiveX或不同的HTML规格有不同的支持,即使是同一厂家的浏览器,也存在不同的版本的问题。不同的浏览器对安全性和JAVA的设置也不一样。 使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,在一种浏览器下显示正常,在另一种下就乱了。不同的浏览器对CSS解释不同。 常见的浏览器兼容性问题,主要表现在如下两方面; 1)页面显示 页面显示的美观性是Web应用程序中重要需求,不同浏览器上呈现给用户的同一个Web页面可能显示的不一样。这些差异性主要表现在对于页面元素的位置、大小、外观。如果在某款浏览器上显示不美观,就会成为一个问题,需要修改。 2)功能问题 Web软件中的功能性问题主要是不同浏览器对脚本的执行不一致,功能性问题极大的限制了用户对Web界面元素的使用。这类问题通常很难被发现,比如某个按钮可能显示正确但实际它是无法使用的,这个则需要用户真正的去使用它才能被发现。 3)现有解决方法 由于软件尽可能多的支持不同类型浏览器,近年来越来越多的成为一个趋势,因此测试的工作量也越来越大。而更多的方法是通过手工进行测试,如何减少工作量,当然想到的还是自动化。 在业内目前通过自动化的方法减少手工测试工作量,主要的过程如下: 1)录制手工操作 将手工操作过程在一个浏览器上通过软件的方式记录下来。记录的主要是鼠标与键盘的动作,同时对每一个操作后的结果,设置一个预期结果。 2)检查测试结果 根据上个步骤录制的脚本,在其他浏览器上进行回放(自动化操作),并比对实际结果与预期结果,如果一样则测试通过,否则测试失败。 上述自动化的主要问题在于: 1)录制时需要设置预期结果,存在额外的工作量。 2)页面变化是WEB软件开发中经常发生的,比如变化了界面显示的文字,移动存放的位置,都可能导致录制的脚本需要进行修改,脚本的维护工作量会比较大。 3)对于操作的结果检查,由于各个浏览器对于界面的展现各不相同,(比如字体的显示各不相同),因此结果可能是多种的,就会很容易产生展现的结果也是美观的,但被误报成测试失败的现象。 1.3.分辨率兼容性测试 分辨率的测试是为了页面版式在不同的分辨率模式下能正常显示,字体符合要求而进行的测试。用户使用什么模式的分辨率,对于我们来讲是未知的。通常情况下,在我们的需求规格说明书中会建议某些分辨率。对于测试来讲,必须针对需求规格说明书中建议的分辨率进行专门的测试。现在常见的分辨率是1024×768,800×600。 1.主流浏览器和测试工具 浏览器 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器交互并获取网页,这些网页由URL指定,文件格式通常为HTML。浏览器是最经常使用到的客户端程序。 个人电脑上常见的网页浏览器包括: 1】 微软的Internet Explorer(6.0,7.0,8.0,9.0) 6.0版本 6.0版本于2001年8月27日发布,距Windows XP正式发布日的数星期前发布。这版本包含增强版DHTML、内联网页框架的内容限制和部分支持CSS level 1、DOM level 1和SMIL 2.0。MSXML引擎会更新到3.0版本。其他新的特征包含一个新版本的IEAK、媒体列和Windows Messenger综合版、错误收集、自动化重整图片大小、P3P和一个新的外观,能配合Windows XP的“Luna”界面。于2002年,Gopher的功能被禁用,7.0版本更取消了对Gopher的支持。 7.0版本 Windows VistaBeta1上的InternetExplorer 7.0Beta1在2005年2月15日,微软主席比尔·盖茨于旧金山的RSA讨论会中,宣布新版本浏览器将会发布。推出新浏览器的原因是InternetExplorer的市场占有率逐渐被MozillaFirefox侵蚀。此外,微软宣布7.0版本只可以用于Windows XP SP2和之后的操作系统中,包括Windows Server 2003 SP1和Windows Vista。InternetExplorer的第一个预览版本于2005年7月27日推出,主要用于技术测试。而第一个向大众的测试版本于2006年1月31日推出,版本是Beta2 preview。最后的公开测试版本于2006年10月18日推出。7.0版本预期可以保护用户于钓鱼式攻击和其他的恶意软件。用户可以完全控制ActiveX和更佳的保安架构,包括与Windows系统分开,不像以往般紧密融合,从而提高安全性。另外,新版本包括收复了一些程序中的错误,加强对各网际标准的支持,增进支持HTML 4.01/CSS 2,新加入分页浏览,还有一个支持各搜索引擎的搜寻方块,一个Web-feed阅览器,支持国际化域名,和反钓鱼式攻击过滤器。它甚至可以挡掉一些程序类型,例如Flash电影和Java。 2008年2月12日,微软以“安全原因”将通过Windows Server Update Services把所有Windows系统的浏览器强制升级到7.0版本。 8.0版本 北京时间2008年3月6日,微软发布了InternetExplorer 8的第一个公开测试版本(beta1)。本次测试第一次包涵简体中文(3月27日推出)版本。测试版本仍然是在IE7的架构下改进的。界面除了做一些细微的调整,增加少许实用功能外,并无改进。beta1版本推出了模拟IE7的模式、增加了在线邮件浏览功能、提高了兼容性、反钓鱼功能进一步增强,可以进行网页地址筛选。北京时间8月28日 消息,据国外媒体报道,微软周三发布了功能完备的升级版IE8 Beta2。微软称,IE8 Beta2的新特性是加强了隐私保护,并提高了使用舒适性及安全性。微软3月份发布了IE8 Beta1,但目的只是向网络开发者展示这一最新IE版本,Beta2则旨在向更多用户进行展示。微软没有透露将于何时正式推出IE8,也并未对会有多少用户下载Beta2作出预测。 微软在当地时间2009年1月26日,也就是我们的农历新年时正式发布了IE8 RC1。此次的IE 8 RC1,是IE 8的最后一个测试版,微软目前已在其下载中心提供IE 8 RC1的下载。该版本可用于32位Vista、64位Vista和Windows XP,任何用户都可下载、试用,但是此次的改进与发行说明尚未更新。此次发布的IE8 RC1只支持Windows XP和Windows Vista,而不支持Windows 7。 微软网站从美国西部时间3月19日上午9点,北京时间3月20日0点开始提 供IE8免费下载,IE8正式版最终问世。IE8正式版可以安装在Windows Vista系统以及Windows XP系统中,而微软新的操作系统Windows 7,IE8浏览器将被捆绑安装其中。IE 8的新功能之一是一种为“InPrivate”的浏览模式。这种浏览模式能够不留下用户PC的指纹。微软希望利用IE 8新增加的功能夺回在浏览器市场失去的市场份额。IE 8新增加功能包括隐私浏览、改善的安全和名为加速器的新型插件。在安全方面,微软增加了跨站脚本过滤器并且增加了防御“点击劫持”攻击的功能。 9.0版本 IE9利用PC的图形处理单元(GPU)优势去加速文字和图形的渲染能 Windows Internet Explore 9 力、加强标签浏览、可伸缩矢量图形(SVG)以外,IE9更遵守网页浏览标准,特别是对HTML5标准的支持。IE9的性能表现大幅提高,从而在运行速度上缩短IE同火狐、Chrome等竞争产品的差距。微软于2011年3月15日(北京时间)在SXSW互动大会正式发布了Internet Explorer 9.0。 IE9界面 IE9.0支持Windows Vista和Windows 7,但并不支持Windows XP。IE9最新的改变包括硬件加速的HTML5和Windows 7无缝的集成、新UI界面、更加出色的安全保护和隐私保护.、对存在诟病了加载项进行了改进、改进了开发工具以及全新淡雅的LOGO。)、2】 Mozilla的Firefox (Redfox是经过定制后的绿色安装增强FireFox版本,其特点如下:采用正式版代码编译优化,支持部分非标准网站;不写注册表,可以方便的拷贝移动或者删除;加入了大量常用扩展供大家在安装的时候选择;对原有FireFox的错误和不方便设置进行了修正;调整了部分次参数进一步加快FireFox的浏览速度。 Madfox是一个基于Firefox的浏览器。Firefox是一个非常优秀的浏览器,但是由于我们周围有很多不符合互联网标准的网站,从而在很大程度上阻碍了Firefox的推广。对于标准和非标准,无论是技术还是非技术层面,都有着非常激烈的争论。Madfox项目的目的,是希望仅从技术的角度出发,通过扩展Firefox,尝试去兼容不符合标准和规范的网站。)、3】 Google Chrome 全球第一大浏览器(Stable Channel(稳定版/正式版):适合追求稳定的普通用户使用。 Beta Channel(测试版):适合喜欢较稳定又可尝鲜的朋友下载使用。该版本是新的正式版发布前的公开测试所用,版本上的新功能不会作太多修改,主要为安全上的测试,但可能会存在不稳定情况。 Dev Channel(开发版):适合开发人员使用。主要为功能上的测试,可能存在稳定性问题,通常更新速度为一周一次。 Canary Build(金丝雀版):仅适合开发人员或追求最新版本的用户使用。2010年7月加入,比开发版更新快但更不稳定,相对的也会加入更多测试性的新功能。Canary Build有一个特色是它可以独立安装,不会覆盖原本的“Google Chrome”版本,让系统中可以同时拥有两套安装版“Google Chrome”。 Chrome Lite(移动简化版):被运用于Android操作系统中。)、4】 Apple的Safari(Safari是苹果公司所开发的网页浏览器,并内建于MacOSX。Safari使用了KDE的KHTML作为浏览器的运算核心。MacOSX中的图形技术能确保系统中所有软件,从iPhoto到FInalCutPro输出的图片都绚丽无比。Safari是唯一采用高级色彩管理、以最准确的色彩显示网络图片的浏览器。Safari在2003年1月7日首度发行测试版,并成为MacOSXv10.3与之后的默认浏览器,也是iPhone与iPodtouch的指定浏览器。图标外形是一个指南针。Windows版本的首个测试版在2007年6月11日推出,支援WindowsXP与WindowsVista,在2008年3月18日推出正式版。safari浏览器目前是全球三大浏览器之一 Safari使用苹果自家的WebKit来进行网页排版及执行JavaScript,当中WebKit内含WebCore排版引擎及JavaScriptCore引擎,分别从KDE的KHTML及KJS引擎衍生而来。WebCore及JavaScriptCore与KHTML及KJS一样,同是自由软件,并以LGPL方式授权。苹果对KHTML的一些改进会并入Konqueror计划。另外,苹果方面也推出了附加的源始码,以类似BSD执照般的开放源代码方式授权。)、5】 Opera(Opera支持多种操作系统,如Windows、Linux、Mac、FreeBSD、Solaris、BeOS、OS/ 2、QNX等,此外,Opera还有手机用的版本,如在Windows Mobile和Android手机上安装的Opera Mobile和在JAVA上的Opera Mini,早在2006年更与Nintendo签下合约,提供NDS及Wii游乐器Opera浏览器软件;也支持多语言,包括简体中文和繁体中文。)、6】 HotBrowser (HotBrowser是冲冠科技(MAGICMASTER)在云计算时代出品的一款云安全浏览器,它也时常被作为平台应用于高端计算机和手持电脑领域。冲冠科技(MAGICMASTER)在内测版本时期由于商标问题将正在研发的浏览器更名为“HotBrowser”。目前尚未有中文版本的HotBrowser,在对于中国来讲是个不平凡的2008年的最后一天,首次提出进军繁体/简体中文浏览器市场。HotBrowser目前并没有官方正式的中文名字,通常被爱好者们译为“浩势”或“云安全”,甚至直接译为“冲冠”。)、7】 GreenBrowser浏览器 (GreenBrowser,又称绿色浏览器,从界面上来看,和MyIE极为相似,具有占用内存少,启动速度很快,不易崩溃等其他特点。另外,对于广告的过滤,不用安装等特点在国内网页浏览器中也很突出。)、8】 Avant 浏览器 (AvantBrowser是一款的多窗口浏览器。它继承了IE的所有功能和使用方式。并在此基础上作了扩充;同时也是一款自定义的web浏览器应用程序,一款设计为扩展Microsoft Internet Explorer 所提供服务的独立的应用程序。)、9】 360浏览器 (360安全浏览器是世界之窗开发者凤凰工作室和360安全中心合作的产品[1],其沙盘安全技术来自与Sandboxie的合作。360安全浏览器自称“最安全的浏览器”、“中国大陆除了IE以外使用者最多的浏览器。简单的比喻就是世界之窗+Sandboxie的OEM版。 360极速浏览器是360安全中心推出的一款基于Chromium开源项目的浏览器,也是基于世界之窗浏览器的再次开发产品,自称是全球首个无缝衔接Chrome和IE的浏览器。其界面与Google Chrome浏览器十分相似。但是360为它添加了一些符合国内用户习惯的一些功能。)、10】 世界之窗 (世界之窗采用IE内核开发,兼容微软IE浏览器,可运行于微软windows98/me/2000/xp系列操作系统上,并且要求系统已经安装了IE。推荐运行在安装IE5.5或更高版本的系统上。)、11】 腾讯TT,QQ浏览器 (腾讯TT是一款集多线程、黑白名单、智能屏蔽、鼠标手势等功能于一体的多页面浏览器,具有快速、稳定、安全的特点。Tencent Traveler 腾讯是中国最早的互联网即时通信软件开发商,是中国的互联网服务及移动增值服务供应商,并一直致力于即时通信及相关增值业务的服务运营。 QQ浏览器6.11是腾讯公司推出的新一代浏览器,使用极速(Webkit)和普通(Trident)双浏览模式,设计了全新的界面交互及程序框架,目的是为用户打造一款快速、稳定、安全、网络化的优质浏览器。)、12】 搜狗浏览器 (搜狗浏览器,搜狐出品,使用高速(webkit)和兼容(Trident)双浏览模式,保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时,可点击地址栏旁边的内核按钮直接切换内核,使用兼容性更佳的兼容模式正常浏览网页。)、13】 傲游浏览器 (傲游浏览器3.0是国内首先尝试使用Webkit与Trident双核心的浏览器。Webkit核心将使你打开网页的速度更快,Trident 核心则会带给你更好的兼容性支持。除此之外,傲游3.0目前还包括智能填表、智能地址栏、弹窗过滤、在线收藏等功能)、14】 百度浏览器 (百度浏览器的使命是让人们更流畅的上网、更愉悦的在线生活。通过百度的开放整合和精准识别,您可以一键触达海量优质的服务和资源,音乐、阅读、视频、游戏等个性所求。百度浏览器,和您一分享美好的互联网世界。依靠百度强大的平台资源,简洁的设计,安全的防护,超快的速度,丰富的内容逐渐成为国内成长最快的创新浏览器。) 15】 Lunascape(5.0+) (Lunascape浏览器,是日本Lunascape公司出品的三引擎浏览器。可在浏览器中自由切换三种渲染引擎:Trident(IE)、Gecko(Firefox)和WebKit,最大地保证了浏览器的兼容性和稳定、快速的特点。此浏览器还获得数个奖项,号称世界首款融合了3种内核、运行速度最快的浏览器。其充分应用了web2.0的时代特征,将浏览器与各种网络服务进行了无缝集成,并携带了多种革命性的功能。如高性能的选项卡式浏览、方便快捷的鼠标手势、RSS订阅、防止意外崩溃功能、IE工具栏支持、直接导入设置从多种浏览器中、自动删除个人信息、多种自定义外观、支持视频共享网站与SNS网站的插件、3种内核自由切换等等。总之,Lunascape可以让您在日常生活中的各种事物均可直接在浏览器内完成。) 2.测试工具 1)Spoon Browser Sandbox Xenocode Sandbox是一个利用强大虚拟技术,实现模拟大部分浏览器来测试网页兼容,但是在使用之前必须要安装一个插件,而且每次使用都必须在其网站上。(公司网络有限制,下载和使用都不方便)使用http://spoon.net/browsers/的沙箱模拟器 优点:在一台测试机器上安装一个客户端,就可以模拟IE6、7、8三种浏览器的渲染效果.缺点: 1)服务器访问较慢,测试机器如果配置低,访问会比较慢。2)经常与微软发生矛盾,关闭IE模拟程序。 2)Superpreview SuperPreview是微软发布的网页开发调试工具,自带有很多元素查看工具,如箭头、移动、辅助线、对比……,在查看网页的IE6/IE7/IE8不同表现的同时,可以对比效果。 在SuperPreview中,你可以同时浏览网页在各个版本的IE中的效果。根据微软的介绍,SuperPreview的可用IE版本视系统已安装IE浏览器的版本而定,如果系统安装了IE8,那SuperPreview浏览器测试可用版本就包括IE8、IE7和IE6;如果系统安装了IE7,那SuperPreview只包括IE7和IE6;如果系统安装了IE6,那SuperPreview只能测试IE6。这也就意味着如果你要使用SuperPreview的话,使用高版本的IE更“划算”。 现在的SuperPreview有两个不同的版本。Microsoft Expression Web SuperPreview for Internet Explorer 可以在IE的版本下调试html,而Microsoft Expression Web 3可以在IE和FF下调试html。Microsoft Expression Web 3是对html页面的调试,而页面的链接不能点击。 (附安装文件)安装时报错请参考:http://12345.co/Topic/view/id-2881 3)IETester IETester是一个免费的WebBrowser控件,让您有渲染和IE8的JavaScript引擎,IE7和IE 6在Windows 7,Vista和XP的IE5.5中,以及在同一进程中安装的IE浏览器。新的v0.4.2:新增开发选项来启用/禁用浏览器的功能!V0.4.11版本还提供DeBugBar插件。 DebugBar是功能强的IE插件,类似于Firefox浏览器的一款开发类插件Firebug.从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利.目前对于个人用户免费.企业用户收费.主要有以下功能: 1.查看网页DOM树,HTTP(S),网页javascript脚本函数归类展示.效验网页中的框架.网页属性的详细信息 2.提供网页源码与IE整理后代码的对比.3.能在无需改变显示器分辨率的前提下用不同分辨率显示页面.并能对页面进行缩放.4.功能对任意位置取色并将HEX码复制到剪贴板中便于保存.5.可将当前页面截图通过邮箱发送出去.另外同时这安装Ietester和companionjs配合使用将给web开发者带来更高的开发体验.(附V0.4.11版本IETester安装文件)4)IE Collection Utilu IE Collection 是个专为程序设计与网页设计师制作的各版本 Internet Explorer 浏览器整合安装包,里面包含了IE 1.0、1.5、3.0、5.5、6.0、7.0、8.0...等等版本的IE网络浏览器。主要目的是让设计师在做好网页后在不同版本的IE浏览器里面测试版面样式与功能,看看是否版面有乱掉或功能不正常…等问题。 在IE Collection中各个版本的IE浏览器都是各自独立的,可以单独执行,此外还提供了Internet Explorer Developer Toolbar工具与Firebug Web Development Extension for Internet Explorer外掛程序,可以让我们通过这些工具检查网页内容的格式、版面错乱或程序错误...等。 附安装文件 安装完成之后,跟ie浏览器一样,没有差别。 注:安装时不要选,建立桌面快捷文件。否则桌面会出现一大片的ie快捷文件。 IETester和IE Collection这两款软件的产生旨在解决多IE版本共存的问题,均可以在网上下载,并且是免费的,是使用最广的web兼容性测试软件。但是在使用时存在一些缺陷: 1、不是所有机器都可以安装成功和正常使用,经常报错、死机,或导致原有的IE无法正常使用 2、其实现原理是模拟的某个版本IE的技术,显示效果与真实IE还是有区别 5)IE Develop ToolBar(在IE8上安装) 优点:通过此工具可以模拟IE7的渲染效果,拥有有IE7、8的真实渲染效果。 缺点: 1)无法模拟IE6的渲染效果。 2)一定要在一台测试机器上安装IE8才能使用。 6)BrowserShots Browsershots在不同操作系统的不同浏览器下给您的网页做截图。这是一个免费的开源的工具,提供给设计师一个方便的途径来测试网站在不同浏览器下的兼容性。您提交的网址会被加入一个任务队列。一群分布式的的计算机会在浏览器里打开您的网站。然后他们将开始截图并上传到我们的中央独立服务器供您浏览。 因为BrowserShots是开源的,官方也提供了XML-RPC接口,我们可以很轻松的去调用它。当然,在这里不是介绍如何调用接口,下面讲的主要是让大家熟悉BrowserShots,并能迅速上手使用。 1.打开官网,就能看到各个OS下的各个浏览器的选项: 2.勾选需要测试的浏览器,输入URL,点击submit就可以了。 3.需要等2分30秒才轮到我,因为网站开源,所以就靠付费会员才能支持下去,所以如果你不想等待,就去当付费会员吧。4.点详细信息,可以查看具体某个浏览器的等待时间: 5.可以看到,有很多已经开始了。这里做的不好,好像必须等所有浏览器都加载完后,才能查看截图。再加上网速似乎有点卡,所以建议大家一次测试最好只勾选2-3款浏览器,比如专门测试网站在firefox各个版本下的效果,就勾选firefox的浏览器,其他都不选,这样效率也能提高,还省时间。 缺点:测试结果生成非常缓慢,随着选择测试项目的数量递增。一个浏览器大概需要2分钟测试时间,还要加上生成报告时间,对中文支持不完善,一些“非主流”浏览器测试截图会出现中文乱码。 (网页地址:http://browsershots.org/) 7)Multiple IEs 这款工具同样用于测试网页在IE浏览器各个版本的兼容性。主要兼容ie6及ie6以前的ie版本的测试。其功能与界面友好程度不及IETester。 目前,ie6以前的版本几乎都没什么人使用了,绝大多数人使用ie6/ie7/ie8等更高级的版本。 (附安装文件)8)IE netrenderer IE Netrenderer是一个firefox插件,用于检查你的网站在IE浏览器中的呈现情况,包括各个常用版本的检测。IE NetRenderer:能实时生成你的网站在 Internet Explorer 5.5、6.0 和 7.0 下的截图。 IE NetRenderer便是一个专门检验网站页面在不同版本的IE中展示效果的网络服务,可以快速查看IE5.5, IE6和IE7下的页面效果,而且还能同时查看在IE6,IE7下的叠加效果和差异效果,很有特色。 附安装软件 安装步骤: 1.打开firefox工具添加附件; 2.添加插件,选择安装即可。 3.安装完成之后,在工具下会增加“获取IE版本效果”的导航,如下图,选择测试的IE版本即可: 输入要测试网站的URL,即可得到网页截图,以及响应时间。9)Viewlike.us! ViewLike.us 是一个可以让你输入网址,让你观看在不同屏幕分辨率下网站的显示效果。 其可供调整的屏幕解析度有:iPhone、Wii Browser、800×600、1024×768、1152×864、1280×800、1400×900、1600×1200与1920×1200。10)BrowserSeal 这款工具的两个主要特色是独立的浏览器支持和带有自动化脚本的命令行界面。 11)Browsera Browsera 是一个可测试您的网站的跨浏览器布局的工具,您会看到您网站上存在的兼容性错误。 六大优点:发现布局问题、找到javascript错误、更方便的测试网站、不需登陆就能测试需登陆的网站、无需安装、测试动态页面。12)WebDevLab 这款工具专门用于测试你的网站在苹果Safari浏览器中是什么样子的。 13)Litmus 这个工具可以帮助你检查你的网站在多个浏览器中的呈现情况,跟踪Bug并创建报告。Litmus 提供约30种浏览器测试,其中有17种基于Windows平台,有6种基于Mac OS X,剩下还有其它的搭配,此外Litmus还提供了一个版本管理工具。但使用Litmus的费用比较贵,一个月要39美元。 14)Browsercam 这款工具是要付费的,可以帮助你检查 Javascript 和 DHTML,提供不同的测试环境平台。可以在不同平台下的不同浏览器中测试你的网站,既可以自动截图,又可以远程访问他们的计算机。 15)firebug Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能还很强大,比如html,css,dom的察看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。 16)Multi-Browser Viewer 比较,验证和归档您在三种操作系统下超过45种因特网浏览器的Web站点。A必须为每个网页设计人员,Web开发人员或管理员。多浏览器连接到一个大型的网络机器,并采取高质量整页的网页截图。这些图像经过处理,下载并在您的电脑桌面显示。 3.兼容性测试注意 浏览器是web系统中对核心的组成构建,来自不同厂家的浏览器对Javascript、ActiveX或不同的HTML规格有不同的支持,即使是同一厂家的浏览器,也存在不同的版本的问题。不同的浏览器对安全性和JAVA的设置也不一样(这个没有深刻的体会)。 目前最为常用的浏览器为:IE6.0、IE7.0。但由于操作习惯的问题,还有相当一部分用户喜欢使用腾讯的TT,以及firefox浏览器,这些浏览器同样也存在各个版本的问题。这个对于web系统来讲是一个相当大的挑战。 对于一些特殊项目(比如定制项目),可以指定某一类型的浏览器(包括版本),这些都必须在需求规格说明书中指名。针对这些指明的浏览器必须进行兼容性测试。但大部分的项目,是不能指定浏览器的,针对这样的项目,那么我们必须针对当前的主流浏览器(含版本),在确保主流浏览器的兼容性测试通过的前提下,再对非主流浏览器(含版本)进行测试,尽量保证项目的浏览器的兼容性测试的完整性。 现将测试原则分解为三个关键词:快速、精确、完整 首先说明一下浏览器兼容性测试是处于真个项目周期的那个阶段,更精确的说是处于测试周期的哪个阶段。 一般来说,分为两种情况: a> 块测试模型(项目特性或项目组历史原因决定,特性:敏捷、快速、可追踪差)b> 集合测试模型(普遍采用模式,特性:测试更加完整,清晰,可追踪) 无论何种测试模型,只有在系统业务流程全部通过、功能基本稳定的情况下进行,这是基本的进入浏览器兼容性测试的条件。 3.1 快速 针对业务流程和主要核心模块,快速执行浏览器兼容性测试。 详细分析系统业务流程,各角色功能分布,功能模块支撑关联;根据以上分析制定测试框架,框架目的为度量在对各个浏览器测试的时候,避免出现遗漏某些功能点或者业务点,保证更加全面的在需求浏览器上面的兼容性测试。同时,有计划的进行测试工作能够大大的提高工作的效率。 3.2 精确 精确定位主流核心浏览器,优化测试方式、提高测试效率 根据需求规约制定出规约中限定浏览器的主要内核,在需求规约中定位相应内核的浏览器各一个(且要求为客户区域内的同内核主流浏览器),根据框架快速执行兼容性测试。 此种方式的优点是能够更加快速的发现不同内核浏览器的问题,降低Bug修复成本、系统风险。 3.3 完整 完整执行需求规约限定支持的所有浏览器。根据最新地区浏览器厂商和版本分布,有主次优先级进行兼容性测试。 限制项包含:不同厂商的浏览器 同一厂商的不同浏览器版本 了解文件兼容性的必要性 每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色,其中一个风险就是旧版本网站无法正确的显示。 为了将这个风险降到最低,IE6允许网页开发人员选择IE编译和显示他们网页的方式。“Quirks mode”为预设,这会使页面以旧版本浏览器的视点显示,“Standards mode”(也称为“strict mode”)特点是支持业界标准最为完善。然而要利用这个增强的支持功能,网页必须包含恰当的指令。 若一个网页没有包含指令,IE6会将它以quirks mode显示。若网页包含有效的指令但浏览器无法辨识,IE6会将它以IE6 standards mode显示。因为少数网站已经包含指令,兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。随著时间经过,更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说,IE6不支持universal selector(即css之全局选择器 * {}),一些网站便使用它来针对IE做特定的对应。 当 IE7增加了对全域选择器的支持,那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7,造成这些网站便无法如他们预期的显示。由于只支持两种兼容性模式,受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。 IE8 比之前的任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题,IE8引入文件兼容性的概念,使 你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式,这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示,你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。 这能让你选择将你的网站更新支持IE8新特点的时机。 认识文件兼容性模式 IE8支持几种文件兼容性模式,它们具有不同的特性并影响内容显示的方式。?Emulate IE8 mode指示IE使用指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视指令。 ?Emulate IE7 mode指示IE使用指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不 同于IE7 mode,Emulate IE7 mode重视指令。对于许多网页来说这是最推荐的兼容性模式。 ?IE5 mode 编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。 ?IE7 mode编译内容如同IE7的standards mode之显示状况,无论网页是否含有指令。 ?IE8 mode提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification(Working Draft)。 ?Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。 由于edge mode使用该IE版本所能支持的最高模式来显示所浏览的网页内容,建议仅使用于测试页及其他非商用页面。 指定文件兼容性模式 要为你的网页指定文件模式,需要在你的网页中使用meta元素放入 X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。第二篇:js面试题
第三篇:学雷锋-js
第四篇:网页兼容性测试
第五篇:网站兼容性解决方案
Content goes here.
其内容随著指定的页面模式而更改,当要模拟IE7时,指定IE=EmulateIE7,指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。
X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外,它必须出现在网页header节其它元素之前的位置,设定网站服务器以指定预设兼容性模式
网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说,下列的 web.config文件使Microsoft Internet Information Services(IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。
若你已于网站服务器指定了一个预设的文件兼容性模式,你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。
请查阅你的网站服务器关于指定自订标头的资讯,或看更多资料:
Implementing the META Switch on Apache
Implementing the META Switch on IIS
判定文件兼容性模式
要判定网页使用IE8浏览时的文件兼容性模式,使用document object(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。
javascript:alert(document.documentMode);
documentMode功能会回传一个数值对应目前页面的文件兼容性模式,举例来说,若网页指定为支持IE8模式,documentMode便会回传值“8”。
在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用,但它们必须更新为使用documentMode。
若你希望使用JavaScript判定一个文件的兼容性模式,引入下面范例的这段程式码可支持旧版本的IE。
engine = null;
if(window.navigator.appName == “Microsoft Internet Explorer”){
// This is an IE browser.What mode is the engine in?
if(document.documentMode)// IE8
engine = document.documentMode;
else // IE 5-7
{
engine = 5;// Assume quirks mode unless proven otherwise
if(document.compatMode)
{
if(document.compatMode == “CSS1Compat”)
engine = 7;// standards mode
}
}
// the engine variable now contains the document compatibility mode.}
认识内容属性值
内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说,你可以设定内容属性值为IE=7.5。当你这样做的时候,IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中,IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。
注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。
你也可以使用内容属性来指定复数的文件兼容性模式,这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式,请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。
如果一个特定版本的IE支持所要求的兼容性模式多于一种,将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式,虽然并不推荐这样做。举例来说,下列标头即会排除IE7 mode。
结论
兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站,有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。
使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用
document.documentMode判定页面的兼容性模式。
选择支持某个特定版本的IE,你可以确保你的页面在未来的浏览器版本中也能有显示的一致