常见浏览器兼容性问题汇总.doc

常见浏览器兼容性问题汇总常见浏览器兼容性问题汇总1 W3C标准规范1.1 W3C 简介万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web 内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

1.2 主要工作W3C 最重要的工作是发展Web 规范，这些规范描述了Web 的通信协议（比如HTML 和XHTML）和其他的构建模块 1.3 主要贡献W3C为解决Web 应用中不同平台、技术和开发者带来的不兼容问题，保障Web 信息的顺利和完整流通，万维网联盟制定了一系列标准并督促Web 应用开发者和内容提供者遵循这些标准。

标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。

W3C也制定了包括XML和CSS等的众多影响深远的标准规范。

但是，W3C 制定的web 标准似乎并非强制而只是推荐标准。

因此部分网站仍然不能完全实现这些标准。

特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

W3C 致力于对web 进行标准化W3C 创建并维护了WWW 标准W3C 标准被称为W3C 推荐标准（W3C Recommendations）W3C 最重要的工作是发展web 规范，也就是描述web 通信协议（比如HTML 和XML）和其他构建模块的“推荐标准”。

1.4 w3cschool及w3c在线验证服务W3CSchool 是因特网上最大的WEB 开发者资源，是完全免费的，是非盈利性的，一直在升级和更新。

由W3C提供的验证服务可以为互联网用户检查HTML 文件是否附合HTML或XHTML标准。

这可以向网页设计师提供快速检查网页错误的方法。

对W3C验证这个事，我们知道W3C是通过规则形式验证的，而我们在写程序的时候往往会有一些难以处理的兼容问题，需要一些不规则的写法来解决，而这样的写法可以解决遇到的问题，但又会通不过验证，在这种时候我们肯定会在解决问题为优先的原则。

2 浏览器介绍 2.1 浏览器概况 2.2 浏览器分析版本介于目前最新版本浏览器例如IE10/11、Safari 7、Firefox 25、Chrome 31已经极大符合W3C标准规范，因此在IE版本中，只做IE6、IE7、IE8分析。

2.3 浏览器内核各品牌浏览器的内核是不同的，不同的内核处理同一段代码的时候思路不同。

因此可以说，浏览器间内核的差异是产生兼容性问题的根本原因。

浏览器名称排版引擎ECMAScript 引擎Internet Explorer Trident ChakraJscript引擎Firefox Gecko SpiderMonkey1.0-3.0 Rhino TraceMonkey3.5-3.6 JaegerMonkey4.0 IonMonkey18 OdinMonkey22 Chrome Webkit早期/Blink28 V8 Safari Webkit SquirrelFish Extreme 2.4 浏览器工作模式及缩写上述浏览器，每种都有两到三种工作模式在这里提到的“模式”是一个与时间点相关联的概念，我们不会因为时间点的不同而更改他们的名称。

也就是说，这个“标准模式”是与浏览器的品牌和版本密切相关的，即便是各浏览器最新版本的“标准模式” 也会有差别。

浏览器的工作模式也被成为“渲染模式”，工作模式的差异不仅表现在处理HTML页面的时候，处理XML及非WEB 内容时也有模式的差异，本文只讨论处理HTML时的工作模式。

为了保证良好的向后兼容性，微软为用户提供了一个“开关”，来决定浏览器的工作模式，就是页面顶部的DTD。

IE6,7,8中的“混杂模式”是为了保证将浏览器的行为冻结在IE5.5版本。

但随着时间推进和进步，2009年IE8重新定义“标准模式”，再次增强对W3C规范的支持，但为了保持对IE7的兼容，还增加了一种“接近标准模式”。

通过以上的内容，我们可以得出结论如果一个页面能使各浏览器都工作在“标准模式”下，那么各浏览器都将尽量兼容标准，因此各浏览器之间表现出的差异是很少的。

相反，如果一个页面使各浏览器都工作在“混杂模式”下，那么各浏览器都将尽量向后兼容，因此各浏览器之间表现出的差异将会最大化。

下图附常见的doctype 在编写一个页面时，要使用可以触发各浏览器“标准模式”的DTD，并书写符合规范的代码，以保证您的页面在各浏览器中可以最大程度的兼容。

3 问题分类（常见）3.1 HTML渲染相关DTD 之前的非空白字符在某些情况下会使该DTD 失效标准参考HTML 4.01 规范中提到，DTD 的前面或后面允许出现空白符，这里提到的“空白符”包括空格符、换行符、制表符和注释。

问题描述如果在DTD 之前加入注释或其他内容，在某些浏览器中该DTD 将无法被识别。

造成影响这个问题将导致同一个页面在有些浏览器中工作在标准模式S 下，在其他浏览器中工作在混杂模式Q 下，从而导致该页面的表现在各浏览器中产生较大差异，如布局混乱、内容重叠、功能无法使用等。

受影响浏览器IE6 DTD 前的任何非空白符都将使浏览器忽略DTD，包括注释和XML 声明。

IE7 IE8 DTD 前的任何非空白符都将使浏览器忽略DTD，包括注释，但不包括XML 声明。

Firefox DTD 前的任何包含“ td1 td2 td3 解决方案设置TABLE 的table-layout 特性值为fixed，或使用固定布局的表格元素可避免此问题。

各浏览器下使用OBJECT元素和EMBED元素嵌入Flash存在差异标准参考OBJECT元素定义了一个嵌入对象，初衷是取代IMG和APPLET元素，但由于安全性等原因及缺乏浏览器支持导致初衷并未实现。

浏览器的对象支持依赖于对象类型。

然而，即便是相同的对象类型，各主流浏览器也都使用了不同的代码来加载。

问题描述通常情况下，IE 系列浏览器通过ActiveX 插件使用OBJECT 元素引入Flash，而其他浏览器则是通过相应的NPAPI 插件使用EMBED 元素。

这造成了各浏览器中插入Flash 的方式的差异造成影响若仅仅使用OBJECT 元素设置了classid 属性引入Flash，则可能造成在某些浏览器中Flash 无法被引入。

而若嵌套的OBJECT 和EMBED 元素参数不统一，也可能造成引入的Flash 在各浏览器中出现差异。

受影响浏览器ALL 问题分析对于HTML4.01 规范中的OBJECT 元素，IE 对classid 属性有自己的解释方式类标识符（class identifier）。

格式形如clsidXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX X。

由ActiveX 组件注册在Windows 的系统注册表中。

codebase 属性则为该类标识符所对应的ActiveX 插件的URI 地址。

一般是一个.cab 安装包。

（更多请参考MSDNCLASSID Attribute | classid Property 及Class Identifier 中的内容。

）EMBED 元素则是由NetScape Navigator 2 引入，用于在HTML 文档中插入符合网景插件应用程序编程接口（NPAPI）规范的插件。

NPAPI 插件是跨平台的，并可以在所有实现了此接口规范的浏览器中使用。

目前的主流浏览器中IE 系列以外的浏览器均支持NPAPI 插件。

事实上IE3.0 就支持NPAPI，但是在IE5.5 SP2 后微软出于安全考虑停止了对NPAPI 的支持，转而推荐用户使用其ActiveX 技术作为替代。

（更多请参考MSDNNetscape 式的插件在升级Internet Explorer 后不工作）EMBED 元素拥有一个名为pluginspage 的属性，其值为NPAPI 插件的URL，与IE 中OBJECT 元素的codebase 属性类似，它告诉了浏览器插件的下载地址。

EMBED 元素不属于HTML4.01 规范中的元素，HTML 文档中直接使用EMBED 元素可能无法通过W3C 校验。

不过EMBED 元素目前已经被添加到HTML5 草案中。

（参加HTML5 草案4.8.3 The embed element）至此若需要在HTML 文档中引入一个已安装的通用的插件，如Flash，则在IE 中使用OBJECT 元素，非IE 中则使用EMBED 元素。

此外IE 中也支持EMBED 元素引入设置了正确MIME 的插件。

解决方案1若不考虑W3C 校验，可统一使用EMBED 元素嵌入Flash，这样可以避免因参数不统一导致的兼容性问题。

2若需要考虑W3C 校验，则可使用OBJECT 元素type、data 属性以及PARAM 元素的方式。

3若必须使用OBJECT 嵌套EMBED 元素这种混合方式，则要保证Flash 文件URL、为Flash 传递的参数、宽度、高度、wmode 等参数保持统一。

4可以使用开源的SWFObject 引入Flash。

IE6 IE7 IE8Q 中IMG 元素的alt 属性在没有title 属性的情况下会被当作提示信息使用标准参考W3C HTML 4.01 规范规定，alt 属性指定了在User Agents 不能显示图片、表单和applets 的时候显示的替换文字。

问题描述alt 属性在IE6 IE7 IE8Q 下具有双重意义。

在给IMG、AREA、INPUT[typeimage] 元素设置的alt 属性值不但可以作为该元素的替代文字，在该元素没有指定title 属性时，还可以作为提示信息（tooltip）被显示出来。

造成影响若用户需要显示提示框，并且仅指定了alt 属性，则在IE8S 及其它浏览器中将无法显示提示框；若用户不需要显示提示框，并且指定了alt 属性，则在IE6 IE7 IE8Q 中仍然会显示提示框。

受影响浏览器IE6 7 8Q 问题分析IE6 IE7 IE8Q 对alt 属性的理解有误，这些浏览器混淆了此属性与title 属性。

在没有设置title 属性的情况下，鼠标放在设置了alt 属性的IMG AREA INPUT[typeimage] 元素上时仍会弹出提示框（tooltip）。

解决方案若用户需要显示提示框，则指定title 属性；若用户不需要显示提示框，则指定title““。

IE6 不支持PNG24 格式图片的半透明效果标准参考无问题描述PNG24 格式图片可以携带Alpha 半透明通道，以便呈现从透明到不透明间过渡色彩效果，但是IE6 不支持这种格式原有的透明特性。