《常见浏览器兼容性问题汇总》由会员分享，可在线阅读，更多相关《常见浏览器兼容性问题汇总（39页珍藏版）》请在金锄头文库上搜索。
1、常见浏览器兼容性问题汇总1 W3C标准规范1.1 W3C简介 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。1.2 主要工作 W3C 最重要的工作是发展 Web 规范，这些规范描述了 Web 的通信协议（比如 HTML 和
2、XHTML）和其他的构建模块1.3 主要贡献 W3C为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题，保障 Web 信息的顺利和完整流通，万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。 但是，W3C 制定的 web 标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。 W3C 致力于对web 进行标准化 W3C 创建并维护了 WWW 标
3、准 W3C 标准被称为 W3C 推荐标准（W3C Recommendations）W3C 最重要的工作是发展 web 规范，也就是描述 web 通信协议（比如 HTML 和 XML）和其他构建模块的“推荐标准”。1.4 w3cschool及w3c在线验证服务W3CSchool 是因特网上最大的 WEB 开发者资源，是完全免费的，是非盈利性的，一直在升级和更新。由W3C提供的验证服务可以为互联网用户检查HTML文件是否附合HTML或XHTML标准。这可以向网页设计师提供快速检查网页错误的方法。对W3C验证这个事，我们知道W3C是通过规则形式验证的，而我们在写程序的时候往往会有一些难以处理的兼容问
4、题，需要一些不规则的写法来解决，而这样的写法可以解决遇到的问题，但又会通不过验证，在这种时候我们肯定会在解决问题为优先的原则。2 浏览器介绍2.1 浏览器概况 2.2 浏览器分析版本介于目前最新版本浏览器例如IE10/11、Safari 7、Firefox 25、Chrome 31已经极大符合W3C标准规范，因此在IE版本中，只做IE6、IE7、IE8分析。2.3 浏览器内核各品牌浏览器的内核是不同的，不同的内核处理同一段代码的时候思路不同。因此可以说，浏览器间内核的差异是产生兼容性问题的根本原因。浏览器名称排版引擎ECMAScript 引擎Internet ExplorerTridentCh
5、akra(Jscript引擎)FirefoxGeckoSpiderMonkey(1.0-3.0)RhinoTraceMonkey(3.5-3.6)JaegerMonkey(4.0+)IonMonkey(18+)OdinMonkey(22+)ChromeWebkit(早期)/Blink(28+)V8SafariWebkitSquirrelFish Extreme2.4 浏览器工作模式及缩写上述浏览器，每种都有两到三种工作模式：在这里提到的“模式”是一个与时间点相关联的概念，我们不会因为时间点的不同而更改他们的名称。也就是说，这个“标准模式”是与浏览器的品牌和版本密切相关的，即便是各浏览器最新版本
6、的 “标准模式” 也会有差别。浏览器的工作模式也被成为“渲染模式”，工作模式的差异不仅表现在处理HTML页面的时候，处理XML及非WEB内容时也有模式的差异，本文只讨论处理HTML时的工作模式。为了保证良好的向后兼容性，微软为用户提供了一个“开关”，来决定浏览器的工作模式，就是页面顶部的DTD。IE6,7,8中的“混杂模式”是为了保证将浏览器的行为冻结在IE5.5版本。但随着时间推进和进步，2009年IE8重新定义“标准模式”，再次增强对W3C规范的支持，但为了保持对IE7的兼容，还增加了一种“接近标准模式”。通过以上的内容，我们可以得出结论：如果一个页面能使各浏览器都工作在“标准模式”下，那
7、么各浏览器都将尽量兼容标准，因此各浏览器之间表现出的差异是很少的。相反，如果一个页面使各浏览器都工作在“混杂模式”下，那么各浏览器都将尽量向后兼容，因此各浏览器之间表现出的差异将会最大化。下图附常见的doctype：在编写一个页面时，要使用可以触发各浏览器“标准模式”的DTD，并书写符合规范的代码，以保证您的页面在各浏览器中可以最大程度的兼容。3 问题分类（常见）3.1 HTML渲染相关DTD 之前的非空白字符在某些情况下会使该 DTD 失效标准参考HTML 4.01 规范中提到，DTD 的前面或后面允许出现空白符，这里提到的“空白符”包括空格符、换行符、制表符和注释。问题描述如果在 DTD
8、之前加入注释或其他内容，在某些浏览器中该 DTD 将无法被识别。造成影响这个问题将导致同一个页面在有些浏览器中工作在标准模式 (S) 下，在其他浏览器中工作在混杂模式 (Q) 下，从而导致该页面的表现在各浏览器中产生较大差异，如布局混乱、内容重叠、功能无法使用等。受影响浏览器IE6DTD 前的任何非空白符都将使浏览器忽略 DTD，包括注释和 XML 声明。IE7 IE8DTD 前的任何非空白符都将使浏览器忽略 DTD，包括注释，但不包括 XML 声明。FirefoxDTD 前的任何包含“”的字符都将使浏览器忽略 DTD，但不包括 XML 声明。Chrome Safari OperaDTD 前的
9、任何非空白符都将使浏览器忽略 DTD，但不包括 XML 声明。问题分析解决方案声明 DTD 时，确保 DTD 之前没有其他字符，即便有，也只能是空格符、换行符和制表符IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 的自动布局标准参考W3C CSS2.1规定，对于跨越多列的单元格，增加这些列的最小宽度，使他们的和至少跟单元格等宽。对于最大宽度也照样处理。如果可能的话，每个扩展到的列增加的宽度应大致相同。问题描述单元格的 colspan 属性在 IE 中可能影响 TABLE 元素的自动布局造成影响严重时导致页面布局混乱受影响浏览器IE6 7 8问题分析td1 td2td3解决
10、方案设置 TABLE 的 table-layout 特性值为 fixed，或使用固定布局的表格元素可避免此问题。各浏览器下使用OBJECT元素和EMBED元素嵌入Flash存在差异标准参考OBJECT元素定义了一个嵌入对象，初衷是取代IMG和APPLET元素，但由于安全性等原因及缺乏浏览器支持导致初衷并未实现。浏览器的对象支持依赖于对象类型。然而，即便是相同的对象类型，各主流浏览器也都使用了不同的代码来加载。问题描述通常情况下，IE 系列浏览器通过 ActiveX 插件使用 OBJECT 元素引入 Flash，而其他浏览器则是通过相应的 NPAPI 插件使用 EMBED 元素。这造成了各浏览器
11、中插入 Flash 的方式的差异造成影响若仅仅使用 OBJECT 元素设置了 classid 属性引入 Flash，则可能造成在某些浏览器中 Flash 无法被引入。而若嵌套的 OBJECT 和 EMBED 元素参数不统一，也可能造成引入的 Flash 在各浏览器中出现差异。受影响浏览器ALL问题分析对于 HTML4.01 规范中的 OBJECT 元素，IE 对 classid 属性有自己的解释方式：类标识符（class identifier）。格式形如：clsid:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX。由 ActiveX 组件注册在 Windows 的系统
12、注册表中。codebase 属性则为该类标识符所对应的 ActiveX 插件的 URI 地址。一般是一个 .cab 安装包。（更多请参考 MSDN：CLASSID Attribute | classid Property 及 Class Identifier 中的内容。）EMBED 元素则是由 NetScape Navigator 2 引入，用于在 HTML 文档中插入符合网景插件应用程序编程接口（NPAPI）规范的插件。NPAPI 插件是跨平台的，并可以在所有实现了此接口规范的浏览器中使用。目前的主流浏览器中 IE 系列以外的浏览器均支持 NPAPI 插件。事实上 IE3.0 就支持 NPA
13、PI，但是在 IE5.5 SP2 后微软出于安全考虑停止了对 NPAPI 的支持，转而推荐用户使用其 ActiveX 技术作为替代。（更多请参考 MSDN：Netscape 式的插件在升级 Internet Explorer 后不工作）EMBED 元素拥有一个名为 pluginspage 的属性，其值为 NPAPI 插件的 URL，与 IE 中 OBJECT 元素的 codebase 属性类似，它告诉了浏览器插件的下载地址。EMBED 元素不属于 HTML4.01 规范中的元素，HTML 文档中直接使用 EMBED 元素可能无法通过 W3C 校验。不过 EMBED 元素目前已经被添加到 HTM
14、L5 草案中。（参加 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 IE8(Q) 中 IMG 元素的 alt 属性在没有 title 属性的情况下会被当作提示信息使用标准参考W3C HTML 4.01 规范规定，alt 属性指定了在 User Agents 不能显示图片、表单和 applets 的时候显示的替换文字。问题描述alt 属性在 IE6 I
