1、常见浏览器兼容性问题汇总doc常见浏览器兼容性问题汇总 常见浏览器兼容性问题汇总 1 W3C标准规范 1.1 W3C简介 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。 到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。 1.2 主要工作 W3C 最重要的工作是发展 Web
2、 规范，这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块 1.3 主要贡献 W3C为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题，保障 Web 信息的顺利和完整流通，万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。 标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。 W3C也制定了包括XML和CSS等的众多影响深远的标准规范。 但是，W3C 制定的 web 标准似乎并非强制而只是推荐标准。 因此部分网站仍然不能完全实现这些标准。 特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代
3、码。 W3C 致力于对web 进行标准化 W3C 创建并维护了 WWW 标准 W3C 标准被称为 W3C 推荐标准（W3C Recommendations）W3C 最重要的工作是发展 web 规范，也就是描述 web 通信协议（比如 HTML 和 XML）和其他构建模块的“推荐标准”。 1.4 w3cschool及w3c在线验证服务 W3CSchool 是因特网上最大的 WEB 开发者资源，是完全免费的，是非盈利性的，一直在升级和更新。 由W3C提供的验证服务可以为互联网用户检查HTML文件是否附合HTML或XHTML标准。 这可以向网页设计师提供快速检查网页错误的方法。 对W3C验证这个事，
4、我们知道W3C是通过规则形式验证的，而我们在写程序的时候往往会有一些难以处理的兼容问题，需要一些不规则的写法来解决，而这样的写法可以解决遇到的问题，但又会通不过验证，在这种时候我们肯定会在解决问题为优先的原则。 2 浏览器介绍 2.1 浏览器概况 2.2 浏览器分析版本 介于目前最新版本浏览器例如IE10/11、Safari 7、Firefox 25、Chrome 31已经极大符合W3C标准规范，因此在IE版本中，只做IE6、IE7、IE8分析。 2.3 浏览器内核 各品牌浏览器的内核是不同的，不同的内核处理同一段代码的时候思路不同。 因此可以说，浏览器间内核的差异是产生兼容性问题的根本原因。
5、 浏览器名称 排版引擎 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 浏览器工作模式及缩写 上述浏览器，每种都有两到三种工作模式 在这里提到的“模式”是一个与时间点相关联的概念，我们不会因为时间点的不同
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 规
8、范中提到，DTD 的前面或后面允许出现空白符，这里提到的“空白符”包括空格符、换行符、制表符和注释。 问题描述 如果在 DTD 之前加入注释或其他内容，在某些浏览器中该 DTD 将无法被识别。 造成影响 这个问题将导致同一个页面在有些浏览器中工作在标准模式 S 下，在其他浏览器中工作在混杂模式 Q 下，从而导致该页面的表现在各浏览器中产生较大差异，如布局混乱、内容重叠、功能无法使用等。 受影响浏览器 IE6 DTD 前的任何非空白符都将使浏览器忽略 DTD，包括注释和 XML 声明。 IE7 IE8 DTD 前的任何非空白符都将使浏览器忽略 DTD，包括注释，但不包括 XML 声明。 Fire
9、fox DTD 前的任何包含“ td1 td2 td3 解决方案 设置 TABLE 的 table-layout 特性值为 fixed，或使用固定布局的表格元素可避免此问题。 各浏览器下使用OBJECT元素和EMBED元素嵌入Flash存在差异 标准参考 OBJECT元素定义了一个嵌入对象，初衷是取代IMG和APPLET元素，但由于安全性等原因及缺乏浏览器支持导致初衷并未实现。 浏览器的对象支持依赖于对象类型。 然而，即便是相同的对象类型，各主流浏览器也都使用了不同的代码来加载。 问题描述 通常情况下，IE 系列浏览器通过 ActiveX 插件使用 OBJECT 元素引入 Flash，而其他浏
10、览器则是通过相应的 NPAPI 插件使用 EMBED 元素。 这造成了各浏览器中插入 Flash 的方式的差异 造成影响 若仅仅使用 OBJECT 元素设置了 classid 属性引入 Flash，则可能造成在某些浏览器中 Flash 无法被引入。 而若嵌套的 OBJECT 和 EMBED 元素参数不统一，也可能造成引入的 Flash 在各浏览器中出现差异。 受影响浏览器 ALL 问题分析 对于 HTML4.01 规范中的 OBJECT 元素，IE 对 classid 属性有自己的解释方式类标识符（class identifier）。 格式形如clsidXXXXXXXX-XXXX-XXXX-X
11、XXX-XXXXXXXXXXXX。 由 ActiveX 组件注册在 Windows 的系统注册表中。 codebase 属性则为该类标识符所对应的 ActiveX 插件的 URI 地址。 一般是一个 .cab 安装包。 （更多请参考 MSDNCLASSID Attribute | classid Property 及 Class Identifier 中的内容。 ） EMBED 元素则是由 NetScape Navigator 2 引入，用于在 HTML 文档中插入符合网景插件应用程序编程接口（NPAPI）规范的插件。 NPAPI 插件是跨平台的，并可以在所有实现了此接口规范的浏览器中使用。
12、目前的主流浏览器中 IE 系列以外的浏览器均支持 NPAPI 插件。 事实上 IE3.0 就支持 NPAPI，但是在 IE5.5 SP2 后微软出于安全考虑停止了对 NPAPI 的支持，转而推荐用户使用其 ActiveX 技术作为替代。 （更多请参考 MSDNNetscape 式的插件在升级 Internet Explorer 后不工作） EMBED 元素拥有一个名为 pluginspage 的属性，其值为 NPAPI 插件的 URL，与 IE 中 OBJECT 元素的 codebase 属性类似，它告诉了浏览器插件的下载地址。 EMBED 元素不属于 HTML4.01 规范中的元素，HTML
13、 文档中直接使用 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 校验，则可使用OBJEC
14、T 元素 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 IE
15、7 IE8Q 下具有双重意义。 在给 IMG、AREA、INPUTtypeimage 元素设置的 alt 属性值不但可以作为该元素的替代文字，在该元素没有指定 title 属性时，还可以作为提示信息（tooltip）被显示出来。 造成影响 若用户需要显示提示框，并且仅指定了 alt 属性，则在 IE8S 及其它浏览器中将无法显示提示框；若用户不需要显示提示框，并且指定了 alt 属性，则在 IE6 IE7 IE8Q 中仍然会显示提示框。 受影响浏览器 IE6 7 8Q 问题分析 IE6 IE7 IE8Q 对 alt 属性的理解有误，这些浏览器混淆了此属性与 title 属性。 在没有设置 ti
16、tle 属性的情况下，鼠标放在设置了 alt 属性的 IMG AREA INPUTtypeimage 元素上时仍会弹出提示框（tooltip）。 解决方案 若用户需要显示提示框，则指定 title 属性；若用户不需要显示提示框，则指定 title“。 IE6 不支持 PNG24 格式图片的半透明效果 标准参考 无 问题描述 PNG24 格式图片可以携带 Alpha 半透明通道，以便呈现从透明到不透明间过渡色彩效果，但是 IE6 不支持这种格式原有的透明特性。 造成影响 带有半透明通道的 PNG24 格式图片在 IE6 中通道颜色被显示成灰色，不具有半透明效果。 受影响浏览器 IE6 问题分析
17、解决方案 1使用 IE 专有滤镜 AlphaImageLoader Filter 来修复 IE6 透明通道问题 2使用脚本批量处理方式function fixpng24 不同内核的浏览器中文件选择控件的外观也不相同 标准参考 根据 W3C HTML4.01 规范中的描述，type 属性为 “file“ 的 INPUT 元素在浏览器中将被渲染为一个文件选择控件（file select），这种控件允许用户在其本地选择文件，通常由一个用于显示文件名的只读文本框及一个用于触发选择文件对话框的按钮组成。 而规范中对文件选择控件只描述了其应具有功能，并没有限制其呈现方式。 所以各浏览器按照自己的方式渲染该
18、控件。 问题描述 对于文本选择控件 “INPUTtypefile“ ，各浏览器对其有不同形式的渲染，并且某些 CSS 特性也有着不同的表现。 其中 Chrome Safari中对文件选择控件的渲染样式与其他浏览器有较大区别，这是由于浏览器所用的 WebKit 内核设计所致。 造成影响 浏览器之间不同的渲染方式将造成某些视觉上的差异，但并不影响功能的使用 受影响浏览器 所有浏览器 问题分析 在不同浏览器呈现方式如下 如果为该控件设置一些css样式，各个浏览器渲染差异就很明显 解决方案 在 Chrome Safari 中对于文件选择控件的特殊呈现方式为 WebKit 内核特有，且其渲染方式也符合
19、W3C 对文件选择控件的规定。 一般来说这种差异不会带来严重的兼容性问题。 若需要强制在所有浏览器中呈现一样的效果，即文本框按钮方式，则需要一些处理 form.example input background url input_boxes.gif no-repeat 0 -58px;border none;width 241px;height 20px;padding-left 3px;padding-top 3px; form.example inputfocus background-color transparent; form.example div.fileinputs posit
20、ion relative;height 30px;width 300px; form.example input.file width 300px;margin 0; form.example input.file.hidden position relative;text-align right;-moz-opacity0 ; filteralphaopacity 0;opacity 0;z-index 2; form.example div.fakefile position absolute;top 0px;left 0px;width 350px;padding 0;margin 0;
21、z-index 1;line-height 90; form.example div.fakefile input margin-bottom 5px;margin-left 0; var W3CDOM document.createElement function initFileUploads if W3CDOM return; var fakeFileUpload document.createElement div ; fakeFileUpload.className fakefile ; fakeFileUpload.appendChilddocument.createElement
22、 input ; var image document.createElement img ; image.src button_select.gif ; fakeFileUpload.appendChildimage; var x document.getElementsByTagName input ; for var i0;i IE6 7 8Q 中 FIELDSET 元素的宽度不是 auto 时的表现与行内元素相同 标准参考 FIELDSET 元素用来将表单 FORM 内的相关元素控件分组，一般结合 LEGEND 使用。 FIELDSET 元素是 block-level 元素，它的 CS
23、S 属性 display 为 block 。 问题描述 在 IE6 IE7 IE8Q 中，当给 FIELDSET 元素设置了一个固定的宽度时，该元素的表现更像是一个行内元素，虽然它的 display 值仍是 block 。 造成影响 局部布局混乱 受影响浏览器 IE6 7 8Q 问题分析 根据 HTML 4.01 和 CSS 2.1 中相应规范说明 FIELDSET 元素是个块级元素，但是 解决方案 通过显式设置 FIELDSET 的样式为 displayblock 来修复 Firefox 中TEXTAREA元素根据 rows 设置值生成的实际行数为设置值 1 标准参考 根据 W3C HTML
24、 4.01 规范中的描述，TEXTAREA 元素的 rows 属性指定了可视文本的行数。 用户应该被允许输入更多行的文本，但当内容超出可视区域时，用户端应该为文本内容提供类似滚动机制。 问题描述 Firefox 对 TEXTAREA 元素的 “rows“ 属性解释有误，实际显示的 TEXTAREA 元素的行数会比设置的属性值多 “1“ 造成影响 当仅仅为 TEXTAREA 元素设置 “rows“ 属性以控制其高度时，在 Firefox 中无法得到预期的效果 受影响浏览器 Firefox 问题分析 解决方案 当我们仅仅为 TEXTAREA 元素设置 “rows“ 属性以控制其高度时，在 Fire
25、fox 中无法得到我们预期的效果。 且其他浏览器对 “rows“ 属性设置的元素高度也不尽相同，这一点 W3C 没有明确规范 “rows“ 属性计算高度时的具体算法。 如果要精确控制 TEXTAREA 元素的尺寸（高度）时，请避免使用 “rows“ 属性改用 CSS 相关设定，以保证所有浏览器拥有统一的视觉样式。 IE6 IE7 IE8Q 中同一元素重复定义的 style 属性会被合并 标准参考 HTML 代码中元素的某个属性应在其所在元素标签内具备唯一性，如我们不应该为一个元素定义两个同名属性。 问题描述 IE6 IE7 IE8Q 中会自动合并元素重复的 “style“ 属性 造成影响 对于
26、 “style“ 属性，由于 IE6 IE7 IE8Q 中的特有现象，当我们因为比如输入了多个 “style “属性定义元素的内联 CSS 后，会导致与其他浏览器中的 CSS 渲染差异。 受影响浏览器 IE6 IE7 IE8Q 问题分析 下面代码 DIV 元素的 “id” “name“ “title“ 属性均定义了两次 123 document.getElementById“d“ 及 document.getElementById“div“ 检测，则仅 document.getElementById“d“ 返回了该元素的 DOM 对象，而 document.getElementById“div
27、“ 返回undefined； 同样的对于 name 属性，使用 document.getElementById“d“.getAttribute“name“ 返回的也是前者的属性值； title 属性则更明显了，当我们将鼠标移至 DIV 上时，弹出的 “dt“ 提示框已经告诉我们前者定义的属性值有效。 以上代码在所有浏览器中表现均一致。 再看一看对于重复定义的class属性 .dc font-size24px; .divc text-decorationunderline; 123 各浏览器的处理结果相同，DIV 中的文字均变为了24px，且均没有出现下划线。 与上一节的结论相同，对于 “cla
28、ss“ 属性，仍然是前面先定义的属性值有效。 下面测试 “style“ 属性 123 DIV 元素内含有两个重复的 “style“ 属性，第一个中写入 CSS 展现灰色背景黑色文字，第二个则是红色背景白色文字。 在各浏览器中效果如下 IE6 IE7 IE8Q IE8S Firefox Chrome Safari Opera 可以很清楚的看到在 IE6 IE7 IE8Q 中，浏览器会将重复的 “style“ 属性合并，而对于 “style“ 属性中重复的 CSS 样式属性，则采用前面的 “style“ 属性定义。 IE8S Firefox Chrome Safari Opera 中，则与前面的结
29、论一致，只有第一个 “style“ 属性中的 CSS 代码有效。 解决方案 不要依赖 IE 的容错机制，避免重复定义 HTML 元素属性 IE6 IE7 IE8Q 会忽略 LI DD DT 元素的结束标记 标准参考 根据 W3C HTML 4.01 规范中对HTML中的列表元素进行了详细的描述，其中将列表分为三类 无序信息列表，使用 UL 元素创建，列表项由 LI 元素构成； 有序信息列表，使用 OL 元素创建，列表项由 LI 元素构成； 定义列表，使用 DL 元素创建，通常由一系列的 “项/定义“ 对（term/definition pairs）组成，即 DT 元素和 DD 元素。 任何列表
30、必须包含一个或多个列表元素。 问题描述 IE6 IE7 IE8Q 会忽略 LI DD DT 元素的结束标记，并且位于同一个父元素内的 LI 元素在文档树中会前后相连，位于 LI 元素之后的元素（不包括 LI、DD、DT、HTML、HEAD、BODY、TITLE 等）搞个会被修复到其前面最近的 LI DD DT 元素内，成为该 LI DD DT 元素的子元素。 造成影响 对 LI DD DT 元素之后出现的非列表元素处理在不同浏览器中导致布局上的差异 受影响浏览器 IE6 IE7 IE8Q 问题分析 一个 SPAN 元素被插在了第二个 LI 元素之后、第三个 LI 元素之前，对于后面的 DD D
31、T 元素也是如此。 这段代码在不同的浏览器环境中的表现如下 IE6 IE7 IE8Q IE8S Firefox Chrome Safari Opera 可以看到，LI DD DT 元素之后出现了非列表元素时，浏览器间对代码的修复特性不相同， 在 IE6 IE7 IE8Q中，SPAN 元素被移动到了其前面最近的 LI 元素内，成为 LI 元素的子元素 在IE8S Firefox Safari Chrome中，浏览器没有对代码结构作任何调整，SPAN 元素依然位于第二个 LI 元素之后、第三个 LI 元素之前，由于 LI 元素为块级元素，所以 SPAN 元素的内容独立显示为一行，对于 DD DT
32、元素也是如此。 解决方案 虽然 HTML 4.01 规范中没有明确指出列表元素的兄弟元素必须是同一列表元素；但是根据 HTML 语义化理念，建议不要在列表元素 LI DD DT 之后插入其他元素。 3.2 CSS渲染相关 IE6 7Q 8Q中A元素的visited hover active伪类未按规范要求的算法来计算针对性 标准参考 关于A标签 A 标签有四个常用的伪类 link 适用于未被用户访问过的链接。 visited 适用于已被用户访问过的链接。 hover 在可视化客户端上，适用于光标（鼠标指针）指向一个元素，但还未激活它时。 active 适用于一个元素被用户激活时。 CSS 2.1 规范建议，在 A 标签上使用这四个伪类时，声明顺序应为L-V-H-A。 因为只有将 ahover 放置在 alink 和 avisited 之后，才能确保在用户将光标指向 A 元素时，ahover 内的声明能够覆盖之前 alink 或 avisited 中特性名相同的声明。 同理，aactive 也应放置在 ahover 之后，
