Web互操作性测试分析报告Web互操作性测试分析报告Web互操作性测试分析报告Web互操作性测试分析报告1111 背景背景分析背景分析分析分析浏览器市场现状浏览器市场现状浏览器市场现状浏览器市场现状目前市场存在很多解析网页的web浏览器 ，最常有的如IE、Firefox、safari等。据NetApplications:2008 年 9 月 IE 71.52%持续领跑浏览器市场； 谷歌在今年9月2日最新发布的Chorme浏览器虽然备受各界瞩目，而且在发布 24 小时内其全球市占率就达到 1%。不过，推出迄今已届满月的 Chrome市占率却未能趁势直线成长，根据美国流量分析业者NetApplications的追踪数字 ，Chrome发布二周后其每日市占率就下滑并稳定维持在 0.7%到 0.8%之间。表1 浏览器全球市场份额IEFirefox浏览器浏览器浏览器浏览器IE8.0 IE7.0 IE6.0 Firefox3.0Firefox2.0SafariOprea Chrome71.52%19.46%市场市场市场市场46.35%24.67% 0.37% 13.27% 5.77%6.65% 0.69% 0.63%Ne t Applications在 2008 年 9 月的浏览器市占率侦测数字显示 ，新问世的Chrome占据了0.78%的浏览器市场，包括微软的IE及 MozillaFirefox浏览器的市占率都下滑，其中，IE的市占率自 8月的72.15%下滑到 9 月的 71.52%，而Firefox的市占率则自 19.73%下滑到19.46%。除了新出炉的Chrome之外 ，苹果的Safari成长，自 8 月的 6.37%成长到 9 月的 6.65%。至于Opera及Netscape则皆落后Chrome ，9 月市占率分别为 0.69%及 0.63%。若从各式浏览器的版本别来看 ，微软IE7.0 的市占率为 46.35%，IE6.0 仍有 24.67%的市占率，仍在测试中的IE8.0 则有 0.37%的市占率，至于Firefox3.0 市占率为 13.27%，显示出大多数Firefox2.0 的用户皆已升级 ，Firefox2.0 市占率仅剩 5.77%。目前谷歌的Chrome仅为 0.2 版，经过了刚发布时靠着Chrome简洁的外型及浏览速度赢得不少使用者惊呼的阶段之后 ，现在各界关心的是Chrome何时才能更为成熟，真正成为使用者桌面上主要的浏览器。各地市场分额各地市场分额各地市场分额各地市场分额虽然IE仍然是主流 ，占据着大部分市场份额，但是在最近欧洲Web数据分析公司Xiti发布了三月的浏览器占有率市场报告 ，数据显示：在欧洲市场，FireFox开源浏览器越战越勇，达到了 29%的市场份额，而在 2 月，这一数据仅为 24.8。这是近期以来FireFox增长最快的一段时间 。其中，芬兰，波兰，斯洛文尼亚甚至高达 43-46%。在大洋洲，Firefox开源浏览器更是拿下了 31.2%的份额。在北美，已经超过 20%的市场份额。在亚洲Firefox有 17.2%的份额，其中截至 2008 年 3 月，火狐在中国占有率为 3%，而在谋智网络于 7 个月成立之前，这一数字仅为1%。而火狐浏览器在中国的用户量正在以每天 50%的新增下载量迅速彪升，其中超过 60%是大学生用户。表2 Firefox各地市场分析亚洲欧洲北美大洋洲17.2%29%20%31.2%2008 年2月，Firefox官方推广网站ww.spreadfirefox.com宣布：Firefox下载量达到 5亿次。Mozilla7 月份宣称 Firefox"下载日"下载量创吉尼斯世界纪录，达 8002530 次。* IE 不再是用户唯一选择不再是用户唯一选择不再是用户唯一选择不再是用户唯一选择从上面数据我们可以看出几年来Firefox用户逐年增多的状况 ，所有的数据都表明，FireFox扮演了IE的麻烦制造者角色 ，并且短期内这种增长的势头依然不会改变。日益壮大的Firefox不但推动着浏览器在安全性 、易用性，以及稳定性方面的日益完善，同时Firefox的发展也在向用户证明：1）IE不再是唯一的选择IE，以及IE为核心的浏览器（Maxthon，腾讯TT等）独霸浏览器市场逾10 年，一直没有出现强劲的竞争对手 ，直到Firefox不声不响，一下子拿下欧洲 29%的，全球 17%的浏览器市场 ，才让这位IT巨人嗅到了空气中浓重的硝烟味，重新捣鼓起了那个还处在老式状态下的IE，IE7 的推出仅仅是 这场浏览器大战的开始 。Firefox的出现打破了IE的绝对垄断地 位，逼迫IE再度创新迎接Firefox等浏览器的挑战，Firefox对IE的挑战无疑是成功的，这让Safari、 Opera等老牌浏览器也兴起了大干一场的念头。2）非Windows操作系统得以快速发展对于所有的非Windows操作系统来说，Firefox绝对是不二的选择 （apple除外），今年最火的莫过于程序员中盛行的ubuntu了，曾经的非 Windows操作系统被认为是技术人员和偏执狂的专利，现在依然是这样，但是从2009 年或者2010年的某个时候开始，桌面版的ubuntu很有可能会逐渐改变这一切 ，最重要的原因就是因为有了Firefox给开源社区带来的这款优质的浏览器。3）网页标准大势所趋所谓网页标准化 ，就是要让同一段代码，在不同的浏览器中显示相同的内容。在那个只有 Windows和IE的年代，所有互联网行业的标准，都被微软毫无顾忌的抛弃，直到Firefox的出现，让微软不得不重新审视网页标准化技术，现在的 IE可以说是积重难返，一方面要符合标准，另一方面要兼容老式IE浏览器，IE7，IE8，IE9，FireFox2，FireFox3， FireFox4正在一起努力实现 CSS3.0、JavaScript2.0 等好几年前就制定了的标准。4）开源技术成为可能长久以来，开源世界一直对商业发展缺乏信心（甚至敌视），而Firefox则做到了 开源和商业的协同发展 ，在Firefox给出的这份答案中，我们可以看到他充分地利用了商业程序不具有的环境，比如强大的社区，世界各地的志愿人员， Beta+Update机制等，更重要的一点是作为没有商业机密开源程序 ，可以获得任何商业公司的支持，甚至是竞争对手，比如微软对Firefox支持， 这里面颇有一点"无欲则刚"的味道。5）扩展机制渐成气候如果07 年技术领域能有一个关键词的话，那就是扩展（是插件的进一步发展），和06年的Ajax一样，扩展也不是什么新技术，但是Firefox的扩展机制，真的 是被发挥的淋漓尽致 ，无懈可击。现在主流的程序，都在以这种机制为基础，不断演进：IDE当然是Eclipse，php的 wordpress、joomla、drupal，JS的jquery等，从趋势上来看，以后的开源程序如果没有动则成百上千和插件，没有完备的插件开发 技术文档，也许就不算是一个好程序了。6）专业领域的搜索引擎得到发展在Firefox中使用搜索引擎 ，并不需要再登陆Google或者Baidu的官方主页，只需要在浏览器的搜索框中输入 ，就可以在特定的搜索引擎中搜索，这让所有的搜索引擎拥有了相同的起点，给专业领域的搜索提供了机会，Google 已经不再是唯一的选择，词条解释直接搜索wikipedia ，字幕直接搜索shooter，英文单词搜索dict.cn。Firefox的对搜索引擎植入的良好扩展性，绝对是一项重大的变革。7）中小软件有了新需求Firefox可以在所有的平台上（Windows， Mac OS X 和 Linux）运行，所以理论上说只要将软件做成Firefox的插件 ，就可以做出一款梦寐以求的跨平台软件，现在已经有了Gtalk，FTP传输，BT下 载，电驴下载，CHM阅读器，RSS阅读器等等中小软件，都可以集成为一个个的 Firefox的插件。8）杀毒软件有点伤心Firefox是一个以安全性著称的浏览器，对于一个可以在 120 小时内，让全球 95%以上用户安装升级包的软件来说 ，开发病毒是完全没有必要的，更何况这还是一款人人都可以提供杀毒补丁的开源软件 ，杀毒软件厂商真的有点伤心了，因为这样的软件开发和升级机制，总有一天会成为操作系统的一部分 ，到时候，杀毒软件真的就只能退出历史舞台了，无奈巧妇难为无米之炊。目前面临的兼容性互操作问题目前面临的兼容性互操作问题目前面临的兼容性互操作问题目前面临的兼容性互操作问题面对Firefox等浏览器用户的日益壮大 ，而许多WEB系统在此浏览器下访问造成不同程度的功能障碍 ，不得不引起关注。目前浏览器市场格局使得用户访问页面出现了一些兼容性问题，有时同一个网页在不同的浏览器出现不同的效果 ，给使用不同浏览器用户带来许多麻烦。存在不同程度的布局渲染问题，功能不兼容等问题。在中国 ，由于基本所有的WEB系统开发者都针对IE进行了测试，所以使用IE的用户访问各类WEB系统基本上不会出现任何问题 ，即使有问题，WEB系统开发者也能很快的可以解决 。在开发过程中很少有对Firefox进行测试。经过对上述中国各大典型应用网站测试，我们可以发现一些Firefox的兼容性，尤其是功能兼容性。互操作测试目互操作测试目测试目的的测试目的的通过本次测试，希望能够：* 告知公众、新闻界与官方组织（私人及公共）建立与W3C标准兼容的页面的重要性。* 希望促进最终用户使用与W3C标准兼容的浏览器无障碍访问网页。* 希望能够引起浏览器开发者、典型WEB系统开发者以及最终用户的注意。共同努力寻找一种解决方案 ，来满足用户使用Firefox浏览器访无障碍问各大安全性要求较高的典型WEB应用系统的要求。3 为什么要建立网站标准为什么要建立网站标准为什么要建立网站标准为什么要建立网站标准我们大部分人都有深刻体验 ，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如 1996-1999年典型的"浏览器大战"，为了兼容Netscape和 IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现 ，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术 。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效 ，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等 。这是一种恶性循环，是一种巨大的浪费。如何解决这些问题呢 ？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司 (Netscape、Microsoft 等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998 年 2 月 10 日发布XML1.0 为标志），并在网站标准组织 www.webstandards.org的督促下推广执行。简单说，网站标准的目的就是：•提供最多利益给最多的网站用户•确保任何网站文挡都能够长期有效•简化代码、降低建设成本•让网站更容易使用，能适应更多不同用户和更多网路设备•当浏览器版本更新 ，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。对于网站设计和开发人员来说 ，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。4 采用网站标准的好处采用网站标准的好处采用网站标准的好处采用网站标准的好处对网站浏览者的好处：•文件下载与页面显示速度更快；•内容能被更多的用户所访问 （包括失明、视弱、色盲等残障人士）；•内容能被更广泛的设备所访问 （包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）•用户能够通过样式选择定制自己的表现界面•所有页面都能提供适于打印的版本对网站所有者的好处：•更少的代码和组件，容易维护•带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。•更容易被搜寻引擎搜索到•改版方便，不需要变动页面内容•提供打印版本而不需要复制内容•提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性 ，其他国家也有类似的要求。5 web 标准标准标准标准555.1 什么是.1 什么是什么是webweb标准标准web标准web标准首先要明确一个概念 。我们本书讲的web标准，不是指XML，而是指为了实现大量HTML信息向XML标准的过渡 ，W3C和ECMA 制定的一系列的技术规范，目前主要包括XHTML1.0、CSS2.0、DOM1.0 和ECMA JavaScrit。web标准不仅仅是一个规范，而是一系列规范的总称。 按这些规范制作的网页，符合XML格式规范，内容与表现相分离，将使你的页面数据在以后可以被分享、交换和重用。555.2 什么是.2 什么是什么是w3c什么是w3cw3cw3cW3C是"World Wide Web Consortium"的缩写，中文称万维网组织。是一个专注于"领导和发展web技术"的国际工业行业协会。它由万维网发明者Time Berners-Lee领导，成立与 1994年。W3C已经有超过 500 家的会员 --包括微软、美国在线 (Netscape的母公司) 、苹果电脑、Adobe、Macromedia、SUN 以及各类主流硬件、软件制造商和电信公司。学会主要研究由三家学术机构主理 --美国麻省理工学院 (MIT) 、法国的欧洲信息与数学研究论坛 (ERCIM) 、日本的应庆大学 (KEIO) 。W3C主要工作是研究和制定 开放的规范 (事实上的标准) ，以便提高web相关产品的互用性。W3C 的推荐规范的制定都是由来自于会员 和特别邀请的专家组成的工作组完成。工作组的草案 (Drafts) 在通过多数相关公司和组织同意后提交给W3C理事会讨论，正式批准后才成为"推荐规范 (Recommendations)"发布。更多的信息您可以访问W3C的网站：www.w3.org。图1 W3C架构图例说明W3C技术架构图描绘了一个两层的模型 ：万维网体系结构（被标注为"OneWeb"）建立在互联网 (Interner) 体系结构之上 。图中丰富的Web层显示了W3C关心的领域和发展的技术 。Web体系结构被描绘成一系列的层，每一层都建立在另一层之上。从底至顶依次为：URI/IRI, HTTPWeb Architectural PrinciplesXML Infosets; RDF(S) GraphsXML, Namespaces, Schemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer,RDF/XML, SPARQL在顶层包含着六个框，分别与W3C主要的活动组相对应：Web Applications, Mobile,Voice, Web Services, Semantic Web, and Privacy。"Interaction"（"交互"）框中罗列着：XHTML, SVG, CDF, SMIL, XForms, CSS, 和WCID."Mobile"（"移动"）框中罗列着 XHTML Basic, Mobile SVG, SMIL Mobile, XFormsBasic, CSS Mobile, MWI BP."Voice"（"语音"）框中罗列着 VoiceXML, SRGS, SSML, CCXML, and EMMA"Web Services"（"Web服务"）框中罗列着 SOAP, XOP, WSDL, WS-CDL, and WS-A."Semantic Web"（"语义的Web"）框中罗列着 OWL, SKOS, and RIF."Privacy"（"保密"）框中罗列着 P3P, APPEL, XML Encryption, XML Signature, and XKMS一 个橙色的横条把这些领域联系在一起：Web Accessibility（Web可访问性）,Internationalization（国际化）, Mobile Access（移动访问）, Device Independence（设备独立）, and Quality Assurance（质量保证）。这个例图展示了万维网的基础框架及 W3C 的工作重点 。URI、HTTP、XML 和 RDF 的基础支持著五个方面的工作。无障碍网页、国际化、设备无关和质量管理等主题已融入了 W3C 的各项技术之中。W3C正致力把万维网从最初的设计 (基本的 HTML、URIs 和 HTTP) 转变为未来所需的模式。 W3C 的技术将帮助未来万维网成为信息世界中有高稳定性、可提升和强适应性的基础框架。555W3C已发布标准W3C已发布标准已发布标准已发布标准WEB标准不是某一个标准 ，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML ，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer ManufacturersAssociation ）的ECMAScript标准。我们来简单了解一下这些标准：图2 web标准组成结构化语言结构化语言结构化语言结构化语言•HTML (HTML (HTML (超文本置标语言) 4.01超文本置标语言) 4.01超文本置标语言) 4.01超文本置标语言) 4.01•XHTML (XHTML (XHTML (可扩展超文本置标语言) 1.0可扩展超文本置标语言) 1.0可扩展超文本置标语言) 1.0可扩展超文本置标语言) 1.0•XHTML 1.1XHTML 1.1XHTML 1.1XHTML 1.1•XML (XML (XML (可扩展置标语言) 1.0可扩展置标语言) 1.0可扩展置标语言) 1.0可扩展置标语言) 1.0HTML是HyperText Markup Language(HTML, 超文本标识语言) 的缩写，广泛用于现在的网页，HTML目的是为文档增加结构信息，例如表示标题， 表示段落；浏览器可以解析这些文档的结构 ，并用相应的表现形式表现出来。例如：浏览器会将............之间的内容用粗体显示。设计师也可以通过CSS(Cascading Style Sheets) 来定义某种结构以什么形式表现出来。XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于 2000 年 1 月 26 日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点 ，直接采用XML还为时过早。因此，我们在HTML4.0 的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡 。XHTML实际上就是将HTML根据XML规范重新定义一遍。它的标签与HTML4.0 一致，而格式严格遵循XML规范。因此，虽然XHTML与HTML在浏览器中一样显示，但如果你要转换成PDF，那么XHTML会容易的多。 XHTML有三种DTD定义：严格的 (strict) ，过渡的 (Transitional) ，框架的 (Frameset) 。 DTD是Document TypeDefinition文档类型定义的缩写 。它写在XHTML文件的最开始，告诉浏览器这个文档符合什么规范，用什么规范来解析。XML是The Extensible Markup Language(可扩展标识语言) 的简写。目前推荐遵循的是W3C于 2000年10 月 6 日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。XML类似HTML也是标识语言，不同的地方是 ：HTML有固定的标签，而XML允许你自己定义自己的标签，甚至允许你通过XML namespaces为一个文档定义多套设定 。和HTML一样，XML同样来源于SGML。XML最初设计的目的是弥补HTML的不足 ，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。表现类语言表现类语言表现类语言表现类语言•CSS (CSS (CSS (层叠式样式表) Level 1层叠式样式表) Level 1层叠式样式表) Level 1层叠式样式表) Level 1•CSS Level 2 revision 1CSS Level 2 revision 1CSS Level 2 revision 1CSS Level 2 revision 1•CSS Level 3 (CSS Level 3 (CSS Level 3 (正在开发中)正在开发中)正在开发中)正在开发中)•MathML (MathML (MathML (数学置标语言)数学置标语言)数学置标语言)数学置标语言)•SVG (SVG (SVG (可变矢量图形)可变矢量图形)可变矢量图形)可变矢量图形)CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5 月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局 、帧和其他表现的语言。通过CSS可以控制HTML或者XML标签的表现形式 。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构 ，使站点的访问及维护更加容易。W3C推荐使用CSS布局方法，使得web更加简单，结构更加清晰。MathML是Mathematical Markup Language的缩写，是一种 XML 语言，引用规范中的描述，其目标就是 "简化网络中数学和科学内容的使用和重用，简化诸如计算机代数系统等应用程序中的打印排版和语音合成。MathML 可用于编码数学符号的表示，从而获得高质量的视觉显示 ，在语义起重要作用的应用程序中（例如科学软件和语音合成），MathML 可用于编码应用程序中的数学内容。" MathML 通常用于表示等式、公式，以及教育领域 、科学论文、行业规范和法规等中的类似内容。SVG是Scalable Vector Graphics的缩写，"可升级矢量图形"的意思。SVG是由W3C制定的基于可扩展标记语言 (XML) 来描述二维矢量图型的一个开放标准。 SVG严格遵从XML语法 ，SVG并用文本格式的描述性语言来描述图像内容，因此SVG是一种和图像分辨率无关的矢量图形格式 。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令 ，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。对象模型对象模型对象模型对象模型•DOM (DOM (DOM (文档对象模型) Level 1文档对象模型) Level 1文档对象模型) Level 1文档对象模型) Level 1•DOM Level 2DOM Level 2DOM Level 2DOM Level 2•DOM Level 3 CoreDOM Level 3 CoreDOM Level 3 CoreDOM Level 3 CoreDOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范www.w3.org/DOM，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件 。DOM给了脚本语言 (类似ECMAScript) 无限发挥的能力。它使脚本语言很容易访问到整个文档的结构、内容和表现。 简单理解，DOM解决了Netscaped的Javascript和 Microsoft的 Jscript之间的冲突 ，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。脚本语言脚本语言脚本语言脚本语言•ECMAScript (JavaScript的标准化版本)ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。ECMAscript是基于NetscapejavaScript的一种标准脚本语言 。它也是一种基于对象的语言，通过DOM可以操作网页上的任何对象。可以增加、删除、移动或者改变对象。使得网页的交互性大大提高。ECMA是"European Computer Manufactures Association"的缩写，中文称欧洲计算机制造联合会。是 1961年成立的旨在建立统一的电脑操作格式标准--包括程序语言和输入输出的组织。 ECMA位于日内瓦，和ISO(国际标准组织)以及IEC(国际电工标准化机构)总部相邻 ，主要任务是研究信息和通讯技术方面的标准并发布有关技术报告。ECMA并不是官方机构，而是由主流厂商组成的，他们经常与其他国际组织进行合作。互操作测试互操作测试6.1 对国内主要金融6.1 对国内主要金融6.1 对国内主要金融商务、商务、政务网站Firefox政务网站FirefoxFirefox与与IEIE互操作测试互操作测试与IE互操作测试与IE互操作测试各种浏览器的存在 ，尤其是Firefox的迅速壮大，正在打破了IE的垄断，为用户提供了多种选择的可能 ，同时也利于科技创新。但同时也带来了各种浏览器之间的兼容性问题。各种浏览器对W3C标准的兼容性也不同 ，而Web系统开发者很难去针对每个浏览器进行测试，因此就造成了许多Web系统应用不能同时对多种浏览器很好的兼容 。给使用不同浏览器访问的最终用户造成很大互操作障碍 ；尤其是金融类、电子商务类、政务类Web应用系统。下面是对中国主要上述三类网站的测试情况：6.16.16.16.1....11测试对象1测试对象测试对象测试对象表3 测试对象网站网站网站网站类别类别类别类别网站名网站名网站名网站名网址网址网址网址浦东发展银行www.spdb.com.cn工商银行www.icbc.com.cn建设银行www.ccb.com中国银行www.boc.cn民生银行www.cmbc.com.cn嘉实基金www.jsfund.cn华夏基金www.chinaamc.com国信证券www.guosen.com.cn金融金融金融金融类网类网类网类网站站站站中国人寿保险www.chinalife.com.cn中华人民共和国中央人民政府www.gov.cn北京公交网www.bjbus.com北京市公安局公安交通管理局www.bjjtgl.gov.cn北京财政局www.bjcz.gov.cn北京劳动保障网www.bjld.gov.cn首都之窗www.beijing.gov. cn政府政府政府政府网站网站网站网站北京工商行政网www.hd315.gov.cn淘宝www.taobao.com当当网www.DangDang.com新浪www.sina.com.cn中国网通www.chinanetcom. com.cn中国移动www.chinamobile. com携程网www.ctrip.com电子电子电子电子商务商务商务商务中国票务在线www.piao.com.cn6.6.6.6.1.1.1.1.22测试环境2测试环境测试环境测试环境Windows和 Linux6.6.6.1.3 测试结果1.3 测试结果测试结果及统计及统计及统计及统计6.6.6.3.1 典型实例测试3.1 典型实例测试典型实例测试：典型实例测试：：：页面排版测试页面排版测试页面排版测试页面排版测试* 民生银行测试民生银行测试民生银行测试民生银行测试图图图图3 Firefox 3.03图图图图4 IE 6通过上面测试发现 ，民生银行主页在ie下显示正常，而在firefox下跑版。* 北京市财政局北京市财政局北京市财政局北京市财政局图图图图5 Firefox 3.03图图图图6 IE6* 阿里巴巴阿里巴巴阿里巴巴阿里巴巴图图图图7 Firefox 3.03图图图图8 IE 6.0交易系统实例测试：交易系统实例测试：交易系统实例测试：交易系统实例测试：民生银行（民生银行（民生银行（民生银行（ http://www.cmbc. com.cn ））））图9 Windows+FF图10 Windows+IE民生网上银行访问首先要CA证书认证 ，Firefox无法将证书加入到浏览器中，导致Firefox无法访问。民生银行提示 ：为了保证您正常使用网上银行，推进使用IE6.0 以上版本浏览器。安全措施：●采用先进的多重加密和数字签名技术 ，所有数据均经过加密处理后在网上传输，以保障客户的交易安全。●采用中国金融认证中心 （CFCA）权威、可信赖的数字证书认证，以保障客户的交易安全。●采用多种防范手段 ，如身份确认、限额控制、密码确认等，以确保客户账户的资金安全。* 中国工商银行中国工商银行中国工商银行中国工商银行图11 Windows+FF图12 Windows+IE由上图我们可以看到通过Firefox无法登陆中国工商网上银行 ，因为没有密码输入框；造成这样的原因是工商银行使用了微软Activex技术控制密码输入 ，而Firefox并不支持微软的这个专有技术 ，所有无法访问。如果要访问中国银行网上银行必须下载安装icbc_netbank_client_controls.exe网银安全控件程序。这就限定了必须使用IE浏览器才可以访问。* 阿里巴巴网站阿里巴巴网站阿里巴巴网站阿里巴巴网站 — 支付宝支付宝支付宝支付宝图13 Windows+FF图14 Windows+IE支付宝也使用了Activex安全控件 ，Firefox不支持该控件，因此无法访问。此前阿里巴巴提示Firefox用户，若使用Firefox访问支付宝，需要安装IE tab插件；但是Linux系统运行的Firefox浏览器无法使用IE tab，因此Linux用户无法访问支付宝。不过这个问题 ，已经被支付宝中国有限公司解决了，支付宝系统最近 2008 年 10 月份刚刚支持firefox。6.6.6. firefox互操作 firefox互操作互操作测试结果统计测试结果统计测试结果统计测试结果统计各类网站基本上全部支持ie浏览器 ，无论是功能还是显示均正常，而对于Firefox的支持，或多或少的都会存在些问题，如下：表4 测试结果网站类网站类网站类网站类别别别别网站名网址排版用户交易网站名网址排版用户交易网站名网址排版用户交易网站名网址排版用户交易系统系统系统系统备注备注备注备注浦东发展银行www.spdb.com.cn支持支持国内支持firefox的两家银行之一工商银行www.icbc.com.cn不完全支持不支持建设银行www.ccb.com不完全支持不支持中国银行www.boc.cn支持支持国内三支持firefox的两家银行之一北京银行www.cmbc.com.cn支持不支持嘉实基金www.jsfund.cn支持不支持华夏基金www.chinaamc.com不完全支持不支持国信证券www.guosen.com.cn支持不支持金融金融金融金融网站网站网站网站中国人寿保险www.chinalife.com.cn 不完全支持不支持中华人民共和国中央人民政府门户网站:www.gov.cn支持无北京公交网www.bjbus.com不完全支持无北京市公安局公安交通管理局www.bjjtgl.gov.cn支持无北京财政局www.bjsat.gov.cn不完全支持页面排版有问题北京劳动保障网www.bjld.gov.cn支持无首都之窗www.beijing.gov. cn支持无较好政府政府政府政府网站网站网站网站北京工商行政网www.hd315.gov.cn支持无淘宝www.taobao.com支持不支持当当网www.DangDang.com支持部分支持 不支持网上直接付款新浪www.sina.com.cn支持不支持中国网通www.chinanetcom. com.cn 不完全支持部分支持电子电子电子电子中国移动www.chinamobile. com 支持不支持携程网www.ctrip.com不完全支持支持页面排版有问题商务商务商务商务中国票务在线www.piao.com.cn支持支持用户 、交易系统：是指页面浏览，注册登陆系统，交易业务系统；6.2 Firefox6.2 Firefox6.2 FirefoxIE等浏览器IE等浏览器等浏览器与与W3CW3C标准兼容性测试标准兼容性测试与W3C标准兼容性测试与W3C标准兼容性测试6.2.1 测试对象6.2.1 测试对象6.2.1 测试对象6.2.1 测试对象* Firefox3.0* IE7.06.2.2 测试工具环境6.2.2 测试工具环境6.2.2 测试工具环境6.2.2 测试工具环境* http://acid3.acidtests.org/* http://acid2.acidtests.org/6.2.3 测试结果6.2.3 测试结果6.2.3 测试结果6.2.3 测试结果* Acid 3 测试测试测试测试Acid3Acid3Acid3Acid3 由网页标准计划小组（Web Standards Project, WaSP）设计，是一份网页浏览器及设计软件之标准兼容性的测试网页，于 2008年3月3日正式发布。其测试焦点集中在ECMAScript、DOM Level 3、Media Queries和data: URL。以浏览器开启此测试网页后，页面会不断加载功能 、直接给予分数，满分为 100分。测试的项目大部份都没有被网站使用 ，原因是兼容性低，也就是说，测试中达满分也没有什么用 ，市场占有率高才可以成为指标。测试标准测试标准测试标准测试标准：：：：Acid3 网页表示「浏览器需采默认值测试，在动画流畅显示、分数达到100/100、并且最后显示的画面同参考结果般每像素皆相同，方称通过。图15 标准值目前测试状况目前测试状况目前测试状况目前测试状况在Acid3 推出时，没有任何一款软件能通过测试。及至推出后不到一月，WebKit和 Presto引擎的测试版本已成功取得 100 分，不过仍有一些问题有待解决。表5 Acid3测试结果排版引擎排版引擎排版引擎排版引擎最新稳定版浏览器测试最新稳定版浏览器测试最新稳定版浏览器测试最新稳定版浏览器测试最新测试最新测试最新测试最新测试注释注释注释注释TridentIe 7.0Ie 8.0 beta 2引擎为InternetExplorer所使用，微软表示IE8.0 仅会对某些Acid3测试到的地方进行改进。KhtmlKonqueror 4.0.4Konqueror svn816030引擎为Konqueror所使用GeckoFirefox3.03Firefox 3.1.preAlpha引擎为mozillaFirefox使用WebkitSafari3.1Safari 4 Developer Preview引擎为Safari、GoogleChrome所使用，Chrome公开测试版本.3.154.0取得 78分。PrestoOpera 9.5WinGogi Acid3 build引擎为Opera所使用，开发组已于2008 年3月28 日成功使之在测试中取得100分，但仍有一些问题有待解决。从上测试结果图中我们可以看出 ，Ie浏览器对 Acid3 标准测试结果的情况，也即对EmcJavascript标准的兼容性极差，远不及Firefox浏览器。* Acid 2 测试测试测试测试Acid2 是针对浏览器，就支持HTML、CSS 及 PNG 图像标准的综合测试，由 WebStandards Project 设计。Acid2 自 2005 年 4 月 13 号正式发布以来，首个正式通过测试的浏览器是 Safari 2.02，接着 Konqueror、Opera 、firefox3.03也陆续通过了这个测试。图16 Hello world！标准测试结果图17 Firefox3.03 Acid2测试图18 Ie6 Acid2测试图19 Ie7 Acid3测试从上测试结果来看，ie6、ie7 都没有通过Acid2 测试 ，因此web页面布局ie与web标准存在很多不兼容性，这在 6.1 的测试中我们也可以看到 ，而firefox3.03 通过了acid2的测试。导致互操作问题及原因导致互操作问题及原因导致互操作问题及原因导致互操作问题及原因777.1 浏览器与.1 浏览器与浏览器与W3CW3C之间的兼容性问题之间的兼容性问题W3C之间的兼容性问题W3C之间的兼容性问题目前市场上主要浏览器有 IE、Firefox、Opera、Safari等，目前市场使用最多的还是IE浏览 器，三分之二以上的市场份额，其次是Firefox。从标准的角度出发，这些浏览器都是劣质的 ，到目前为止没有一个浏览器能够完美的符合W3C标准。在上述浏览器中，尤其是微软IE对W3C标准的支持最差 ，但是缺少完美浏览器不是逃避标准的理由。20 世纪90年代的专有浏览器（Netscape，Micros oft）技术很少考虑标准，老的浏览器完全忽略了一些标准 ，它们也造成许多开发的麻烦。例如，如果浏览器不支持PortableNetwork Graphic（PNG）标准，那么开发者也不会使用PNG图片，这都没问题。可是麻烦在于，那些老浏览器嘴上说得好听，要支持一些标准，但实际上只是支持了部分，甚至是错误的支持 。比如漫不经心地支持基础的HTML标准，造成混乱的Web发布环境。从刚开始Netscape Navigator睥睨群雄，到后来IE一统天下，对于最终用户来说，这种单一公司统领浏览器市场的情况并非好事 。网站开发者为了能够吸引和留住更多的访问用户，设计出的WEB页面必须要与处于垄断地位的浏览器相兼容，从而被它牵着鼻子走，对于WEB标准的遵循被放在了第二位 。而浏览器厂商所提供的特性不一定完全是出于为了最终用户的角度考虑的 ，商业利益总是会被放在第一位。Firefox相对来说比IE表现的要好，通过对Firefox的了解，Firefox开发者针对W3C标准的处理原则有三：一是坚持推行 w3c标准 ；二是兼容被广泛应用的现实标准。三是在兼容现实标准的时候，不能破坏已有的实现，否则就放弃兼容。伴随着Firefox等浏览器在市场上的优秀表现 ，微软IE不得不转变了立场，不得不关注对W3C标准的支持 ，目前Firefox和IE8.0 都即将发布 ，微软刻意强调了在支持标准方面所做的努力：IE8 会最大限度地支持W3C标准。且微软已经发布了一系列互操作性协议，表示IE8 将遵循这些协议以达到对W3Cde最大支持。但是在正式发布之前，我们只能拭目以待。表6 各浏览器w3c测试结果（数据来自： http://www.webdevout.net ）Y (yes), N (no), or I (incomplete support)上表描述了当前主流浏览器对web标准的支持 ，也可说是兼容程度。在HTML/XHTML标准中，四者对HTML4.01 的支持相当 。但是对XHTML1.0changes的支持程度却有相当大的差异，Firefox2、firefox3 和opera9 的支持程度高达 92%，而IE的支持程度只有 17%；对于XHTML1.1changes，IE完全不支持，而Firefox2 和Opera9 的支持程度分别为 63%和58%。在CSS2.1 标准中，值得强调的是，Firefox和 Opera9 对于CSS2.1 多项属性支持均达到了 100%。IE6和IE7 除了对 CSS2.1Units的支持高达 96%之外，对其他属性支持大多不足50%。各浏览器对CSS3change的支持均不容乐观，除了对CSS3units的支持度均达到 75%以上，以及对CSS3Basic selectors的支持率达到50%以上之外，对其他属性的支持率都极地。对于DOM标准的支持，Opera9 表现突出 。当然也有不乐观的情况，比如各浏览器都完全不支持DOM Level 3 Validation。令人欣慰的是各浏览器对ECMAScript的支持都非常高。7777.2.2.2.2 WWWWebeb应用系统与eb应用系统与应用系统与W3C之间的兼容性问题之间的兼容性问题W3C之间的兼容性问题W3C之间的兼容性问题目前国内外网站遵循标准现状目前国内外网站遵循标准现状目前国内外网站遵循标准现状目前国内外网站遵循标准现状* 国外符合国外符合国外符合国外符合 Web 标准的站点标准的站点标准的站点标准的站点国外符合web标准的站点非常多 ，最近新改版的大网站基本都采用CSS布局，这里只列部分比较知名的大站点：•http://www.macro media.com/•http://www.k10k. net/•http://www.mp3.com/•http://www.blogger.com•http://www.espn. com/•http://www.fyrebase.com/* 国内符合国内符合国内符合国内符合 web 标准站点标准站点标准站点标准站点一些注重技术和成本的商业网站率先全面使用web标准技术进行网站重构 。例如：•网易（www.163.com）•淘宝网 （www.taobao.com）•265 上网导航（www.265.com）•金山在线 （www.kingsoft.com）•donews（www.donews.com/www.donews.org）•优友地带 （www.uuzone.com）另外 ，大部分的blog站点都是符合web标准的，因为blog程序本身就是符合标准的。除了blog以外 ，重新制作的符合标准的网站有：•闪客帝国 : 国内最大的Flash 、闪客、动漫综合信息门户网站。•网易科技频道 : 三大门户站点首先开始重构的频道。•七色鸟设计空间 : 专业的艺术设计信息网站, 设计师交流平台。•枪旗工作室 : 站长：火旗枪剑。半条命：反恐精英修改工具及教学站。•夜雨敲窗 : 站长：李爽。关于品碟、乐评、个人文字和网站建设等。•爱雪网络 : 站长：icyivy。SEO研究,WEB标准,ASP编程. 网站综合设计开发。•九九设计工作室 : 站长：阿哲 。一个以网站建设、维护为主要业务的小型工作室。•沈阳讯窗科技有限公司企业网站推广网站设计中心 : 位于沈阳的专业企业网站设计和网络营销服务商 ，至力于面向营销的企业网站建设、网站推广、网站开发和网站解决方案。•锐音在线 : 湖南长沙浩锐网络会所。提供音乐在线试听。•锐意先行南京网站推广 : 专业提供网站推广，GOOGLE排名，搜索引擎排名服务，网站优化服务。•中国SOHO网 : 努力做一个给SOHO提供一切学习，资源讯息的网站。•上海Layout设计公司 : 企化，网站建设，展示设计。•报喜鸟集团有限公司 : 报喜鸟服饰。•海意平面工作室 : 站长：辛乐，一个平面设计工作室的网站。•魔兽世界中文网·艾泽拉斯国家地理 : 喜欢魔兽的朋友都知道。•生活新色彩 : 主要提供中文艺术字体下载, 站长柠檬园主, 从事WEB标准设计与动态程序编写。7.2.2 不兼容原因不兼容原因不兼容原因不兼容原因目前网站不遵循W3C标准的原因主要有下几点：* 有99%采用HTML4.0或者更老规范建立的网页需要转换到XHTML；* 每天依然有大量的新的页面采用不符合web标准的技术在发布；* 缺乏易用的、强大的支持web标准的页面开发软件；* 主流浏览器IE对web标准的支持不完善；* 大批的设计师需要了解web标准，转变观念；HTML+table 与与与与 DIV+CSS 是根源是根源是根源是根源因为 HTML 的标准化工作展开的比较早，各种浏览器在对 HTML 的实现上基本上都是按照 W3C HTML 3.2/4.0/ XHTML 等标准来进行的，可以说，同样的纯纯纯纯 HTML （无脚本及样式等）在不同浏览器下的效果差异是很小的，基于纯纯纯纯 HTML 的页面设计效果是可控的、可以预见的。不兼容通俗讲就是没有按照W3C规范来开发网页 。由于纯HTML差异很小，主要在于table标签的使用不同带来的差异较大 。以前网页都是HTML+table来进行布局，而标准要求我们使用 Div+CSS进行网页布局，所以造成不兼容问题。标准要求在开发网站时要将结构布局与表现分离 ，就是将数据内容交给XHTML（或者HTML、XML），把表现交给CSS来实现。777浏览器之间的兼容性问题浏览器之间的兼容性问题浏览器之间的兼容性问题浏览器之间的兼容性问题777.3.1 浏览器自定义.3.1 浏览器自定义浏览器自定义规范导致兼容性问题规范导致兼容性问题规范导致兼容性问题规范导致兼容性问题从理论上来讲 ，现在世界上有几百种浏览器。它们都遵循W3C标准规范，不过仍略有不同 。如果一个网站在搜索引擎之间的兼容性很强，那么它在所有的浏览器中看起来效果和外观都是差不多一样的。每个浏览器都在不同程度上支持HTML ，JavaScrip和CSS样式。不同浏览器之间所存在的差异会导致页面在某些浏览器上不能正常显示 ，这是由于每个浏览器都可以很自由的给这些形式的W3C标准规范版本添加它们自己的一些规范 。还有一些其他的因素可以导致界面和文字在不同的浏览器里有不同的显示效果 ，比如说最基本的操作系统。Firefox和IE对 JavaScript、CSS不兼容如下举例说明：Firefox和IE对 JavaScript不兼容Firefox和IE对 JavaScript不兼容Firefox和IE对 JavaScript不兼容Firefox和IE对 JavaScript不兼容a. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在MF 下运行.(2)解决方法： 改用 document.formName.elements["elementName"] (3)其它 参见 bb. 集合类对象问题(1)现有问题： 现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。 (2)解决方法： 改用 [] 作为下标运算。如：document.forms("formName") 改为document.forms["formName"]。 又如：document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1] (3)其它c. window.event(1)现有问题： 使用 window.event 无法在 MF 上运行 (2)解决方法： MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通： 原代码 (可在IE中运行)： <input type="button" name="someButton" value="提交"onclick="javascript:gotoSubmit() "/> ... <script language="javascript"> function gotoSubmit() { ... alert(window.event); // use window.event ... } </script> 新代码 (可在IE和MF中运行)： <input type="button" name="someButton" value="提交"onclick="javascript:gotoSubmit(event)"/> ... <script language="javascript"> function gotoSubmit(evt) { evt = evt ? evt : (window.event ? window.event : null); ... alert(evt); // use evt ... } </script> 此外，如果新代码中第一行不改，与老代码一样的话 (即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。d. HTML对象的id作为对象名的问题(1)现有问题 在IE中，HTML对象的ID可以作为 document 的下属对象变量名直接使用。在MF中不能。 (2)解决方法用getElementById("idName") 代替idName作为对象变量使用。e. 用idName字符串取得对象的问题(1)现有问题在IE中，利用 eval(idName) 可以取得id为idName的 HTML对象，在MF中不能。(2)解决方法用 getElementById(idName)代替eval(idName)。f. 变量名与某HTML对象id相同的问题(1)现有问题在MF中，因为对象id不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能。(2)解决方法在声明变量时，一律加上var ，以避免歧义，这样在IE中亦可正常运行。此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。 (3)其它 参见 问题eg. event.x 与 event.y 问题(1)现有问题 在IE 中，event 对象有 x, y 属性，MF中没有。(2)解决方法在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。故采用 event.clientX 代替 event.x。在IE 中也有这个变量。event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。如果要完全一样，可以稍麻烦些：mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x(3)其它 event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。h. 关于frame (1)现有问题 在 IE中 可以用window.testFrame取得该frame，mf中不行 (2)解决方法 在frame的使用方面mf和ie的最主要的区别是：如果在frame标签中书写了以下属性：<frame src="xx.htm" id="frameId" name="frameName" />那么ie可以通过id或者name访问这个frame对应的window对象而mf只可以通过name来访问这个frame对应的window对象 ,例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问ie： window.top.frame Id或者window.top.frame Name来访问这个window对象mf： 只能这样window.top.frame Name来访问这个window对象另外 ，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签并且可以通过 window.top.document.getElementById("testFrame"). src ='xx.htm'来切换frame的内容也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容关于frame和window的描述可以参见bbs 的'window与frame'文章,以及 /test/js/test_frame/目录下面的测试i. 在mf中，自己定义的属性必须getAttribute()取得j.在mf中没有 parentElement parement.children 而用 parentNode parentNode.childNodes childNodes的下标的含义在IE和MF中不同 ，MF使用DOM规范，childNodes中会插入空白文本节点。 一般可以通过node.getElementsByTagName()来回避这个问题。 当html中节点缺失时，IE和MF对parentNode的解释不同，例如 <form> <table> <input/> </table> </form> MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点 MF中节点没有removeNode方法，必须使用如下方法node.parentNode. removeChild(node)k.const 问题 (1)现有问题: 在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。 (2)解决方法: 不使用 const ，以 var 代替。l. body 对象 MF的body在body标签没有被浏览器完全读入之前就存在 ，而IE则必须在body完全被读入之后才存在m. url encoding在js中如果书写url就直接写&不要写&例如var url ='xx.jsp?objectName=xx&object Event=xxx';frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到当然如果是在tpl中例外 ，因为tpl中符合xml规范，要求&书写为&一般MF无法识别js中的&n. nodeName 和 tagName 问题 (1)现有问题： 在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象 有问题（具体情况没有测试，但我的IE已经死了好几次）。 (2)解决方法： 使用 tagName，但应检测其是否为空。o. 元素属性 IE下 input.type属性为只读，但是MF下可以修改p. document.getElementsByName() 和 document.all[name] 的问题 (1)现有问题： 在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。Firefox和IE对CSS的不兼容Firefox和IE对CSS的不兼容Firefox和IE对CSS的不兼容Firefox和IE对CSS的不兼容Firefox和IE对某些css样式的认定有不少区别 ，举例说明如下：•ul和ol的默认padding值是不一样的 ，在Firefox中，padding-left默认值为 40px左右，而IE中为0，只能将它们指定为 20px才保证在两个浏览器中显示效果一样；•对字体大小small的定义不同 ，Firefox中为 13px，而IE中为 16px，差别挺大，也只能设置为 14px了事；；•并列排列的多个元素 （图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略 ，而IE中却默认显示为空格（约 3px）；•对不规范代码的兼容情况不同 ，IE中漏掉的关闭符号对显示不造成影响，而firefox中就会形成错乱的布局 ，而在ie中用到的padding和margin的负值都会被firefox解析为0，易造成布局的混乱；•firefox对于长高尺寸的严格解析会造成与设置不匹配 （超出）的图片或表格将原设置div撑大；•！important属性可以在除IE浏览器的其他浏览器中起作用，因此有人利用这种差别来令一个CSS兼容多种浏览器；•未定义id的 div，在IE中会与div属性中的其他设置有关，而在firefox中的位置会于div在文件中位置有关，紧随前一个div出现。各浏览器之间CSS不兼容性程度列表：图19 CSS hack列表7772 因某些2 因某些因某些WebWeb专有技术造成的浏览器之间的兼容性问题专有技术造成的浏览器之间的兼容性问题Web专有技术造成的浏览器之间的兼容性问题Web专有技术造成的浏览器之间的兼容性问题网页通常使用HTML （超文本连结标记语言）文件格式，并在HTTP协议内以MIME内容形式来定义。大部分浏览器均支援许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式 ，还可以利用插件来支援更多文件类型。在HTTP内容类型和URL协议结合下，网页设计者便可以把图像、动画、视频、声 音和流媒体包含在网页中，或让人们透过网页而取得它们。早期的网页浏览器只支援简易版本的HTML 。专属软件的浏览器的迅速发展导致非标准的HTML代码的产生。这导致了浏览器的兼容性的问题。现代的浏览器 （Mozilla、Opera和Safari）支援标准的HTML和XHTML（从HTML 4.01版本开始）。他们显示出来的网页效果都一样。 Internet Explorer仍未完全支援HTML 4.01及XHTML 1.x。现在许多网站都是使用所见即所得的HTML编辑软件来建构的，这些软件包括Macromedia Dreamweaver和Microsoft Frontpage等。他们通常缺省产生非标准HTML；这阻碍了W3C制定统一标准，尤其是XHTML和CSS（层叠样式表，设计网页时用）。 有一些浏览器还加载了一些附加组件来Usenet新闻组 、IRC（因特网中继聊天）和电子邮件。支援的协议包括NNTP（网络新闻传输协议 ）、SMTP（简单邮件传输协议）、IMAP（交互邮件访问协议）和POP（邮局协议）。不同的浏览器有不同的功能 ，为了商业利益，开发商多选择专有技术来提高浏览器的竞争力 ，这就导致了浏览器因为专有技术而互不兼容。例如与国外网站不同的是，中国网页上有很多Flash动画 ，这些Flash最早是基于微软的"ActiveX"开发，离开IE便不能运行。尽管现在已有火狐版Flash插件 ，但仍不能像IE那样自动安装。更为严重的是，中国各大银行的网上交易安全控件也普遍采用 "ActiveX"技术开发，没有支持火狐版本。所以，为能正常进行金融业务 ，很多火狐用户被迫同时使用IE，Linux用户更是不得不另外装个 Windows系统。IE浏览器专有技术为其市场垄断地位做出很大贡献，这些专有技术如下：IE除了实现HTML 4.0和DHTML以外，微软加入了许多自己定义的技术，不论这些技术是否兼容：* 在支持NetScape的JavaScript(ECMA Script) 的基础上实现了功能更加强大的Jscript引擎；* ActiveX的兼容让浏览器不仅仅是一个哑终端，而是通过ActiveX和ActiveXDocument具备了高度交互的能力；* 优化CSS(级联样式单), 让Web界面的内容表现更加丰富；* 针对Web开发人员提出了HTC(HTMLComponent) 和HTA(HTML Application) ，通过编写脚本方式的组件和应用程序让HTML无所不在，而浏览器和操作系统的无缝结合正是这一技术的基础；* 内置了矢量图形解析引擎。VML(Vector Markup Language) 是其在浏览器矢量图形方面的一个比较小但是非常实用的应用 。相对于当时的SVG标准而言，VML远没有其功能强大 ，但是标记内置和解析引擎内置的方式却能够让Web开发人员容易的使用 ，Office的艺术字就是一个比较经典的应用；* 通过ActiveX的方式内置了MSXML解析引擎，支持DOM和XSLT；在中国 ，由于IE垄断市场，各大型金融类网站、电子政务类、电子商务类等网站由于安全问题 ，必须依靠IE专有安全技术提供各项服务。这就造成了以Firefox为首的开源浏览器不能兼容其提供的功能 。尤其是Activex插件技术。8 怎怎怎怎么改善现有网站么改善现有网站么改善现有网站么改善现有网站我们大部分的设计师依旧在采用传统的表格布局 、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站 符合网站标准也不可能一步到位 。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标 准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。888浏览器与W3C浏览器与W3C解决方法解决方法解决方法解决方法网页标准化是趋势 ，用户需要标准化的浏览器，市场将驱动标准化的步伐。IE7、IE8 证明了微软不能无视W3C标准的存在，Firefox让微软不得不重新审视网页标准化技术。目前各种浏览器针对W3C标准的兼容程度各有不同 ，希望新版本的浏览器更加支持W3C标准 ，更加标准化。浏览器W3C标准测试：* http://acid2.acidtests.orgAcid2是一个由WaSP（The Web Standards Project，网页标准计划组）编写的针对网页浏览器的测试页面 （不是软件）。浏览器开发者用这个测试页面来验证自己的产品是否能够精准的还原页面编写者的设计。Acid2 是一个复杂的页面，页面内包含了很多不常用的复杂结构，所以能有效的检测出浏览器排版的漏洞 。WaSF在 1997 年发布了第一版 （命名为Acid），意图在于通过测试结果激发编程人员的热情 ，从而改变业内存在很多不规范的设计和完善浏览器的开发。* http://acid3.acidtests.orgacid3测试的主要目的是考核Web 2.0规范，发现ECMAScript 262he W3C Document ObjectModel 2标准应用中的漏洞。正是这些DOM Scripting促成了高级网页交互功能和众多高级网络应用 ，比如在线邮件、在线办公等等。测试规范如下：* DOM2 Core* DOM2 Events* DOM2 HTML* DOM2 Range* DOM2 Style (getComputedStyle, …)* DOM2 Traversal (NodeIterator, TreeWalker)* DOM2 Views (defaultView)* ECMAScript* HTML4 (<object>, <iframe>, …)* HTTP (Content-Type, 404, …)* Media Queries Selectors (:lang, :nth-child(), combinators, dynamicchanges, …)* XHTML 1.0* CSS2 (@font-face)* CSS2.1 (inline-block, pre-wrap, parsing…)* CSS3 Color (rgba(), hsla(), …)* CSS3 UI (cursor)* data: URIs* SVG (SVG Animation, SVG Fonts, …)Acid3 满分100分。要通过测试，浏览器必须使用默认设置，动画渲染必须整齐，得分必须达到 100/100，最终渲染结果的每个像素都必须和官方参考结果完全相同。8888.2 Web.2 Web应用开发类问题解决方法.2 Web应用开发类问题解决方法应用开发类问题解决方法应用开发类问题解决方法888.2.1 在开发网站过程中使用.2.1 在开发网站过程中使用在开发网站过程中使用W3CW3C标准标准W3C标准W3C标准* 基本原则：* 简单说就是不用HTML+table来设计页面，改用XHTML+CSS来实现。* DOCTYPE是document type(文档类型) 的简写，用来说明你的网页是什么标识语言 (XHTML或者HTML) 是什么版本。 初次学习web标准的设计师推荐使用XHTML 1.0 过渡式的DTD，代码如下：<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">* 使用表格。表格仅仅用于其本意：展示数据列表。而不允许使用表格排版和定位。使用开发工具时注意：使用开发工具时注意：使用开发工具时注意：使用开发工具时注意：* HTML编辑器使用任何的HTML编辑器都会存在兼容性的问题 ，甚至包括手�