IE6-IE11兼容性问题列表及解决办法.docx
IE6升级到IE11兼容性问题和操作手册2015/3/2 Bob Liu目录概述2第一章：HTML3第一节：IE7-IE8更新31.如果缺少结束标记的 P 元素后跟 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素，会自动添加结束标记。32.支持格式正确的有效标记，不再支持格式错误的 HTML。43.Button标签的默认type类型从button改为submit。54.不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性.6第二节: IE8-IE9更新71.表对象模式现在更加符合其他浏览器。72.文本布局使用自然度量而不是图形设备接口 (GDI) 度量。9第二章：CSS11第一节：IE6-IE7更新111.方框模型溢出内容现与方框相交，不再让方框自动增长适应内容。112.不再支持某些 CSS 筛选器（如 *HTML、_underscore 和 /*/ 注释）。133.已解决SELECT 元素不能被div覆盖的问题。154. CSS样式区分大小写。165.Style中的height, width结尾需要输入单位，如px16第二节：IE7-IE8更新171.不再支持 CSS 表达式，改为支持增强的 CSS 或 DHTML 逻辑。17第三节：IE8-IE9更新181.泰语和东亚语文本和字体大小的显示可能小于其他字样。182.某些行为连接方法在 XML 模式中不可用。19第四节：IE9-IE10更新201.不再支持 CSS behavior，完全废弃htc表达式。20第三章：Javascript and DOM21第一节：IE6-IE7更新211.不再允许用于绕过 window.close 提示的 window.opener 技巧。212.从脚本创建的模式或无模式对话框看起来似乎稍微变大。21第二节：IE7-IE8更新221.支持“class”语法，不再支持“className”属性语法。222.属性集合不再包含 Internet Explorer 可识别的所有可能属性。233.属性排序已更改，影响了属性集、innerHTML 和 outerHTML。244.GetElementById 区分大小写，且不再搜索名称属性。245.currentStyle 对象的Unset属性现在返回其初始值。256.style 对象的 Unset 属性值现在返回空字符串。26第三节：IE8-IE9更新271.createElement 方法中不允许使用尖括号<> 。272.IE9 标准模式不支持arguments.caller 属性。283.不再支持使用不带“.call”或“.bind”的函数指针调用方法。294.不再连接内容属性和 DOM expando。305.JavaScript 属性列举在IE9 中不同。316.数学精确度在IE9 中不同。337.间接“eval”函数调用的行为方式不同。348.IE9 处理含大型索引的数组项目的方式不一样。359.重叠元素会被复制。3610.DOM中会保留空格。3711.部分DOM 事件已过时。38第四节：IE10-IE11更新391.已删除attachEvent，改用addEventListener。392.已删除window.execScript，改用eval。393.已删除window.doScroll，改用window.scrollLeft、window.scrollTop。394.已删除document.all，改用document.getElementById。405.已删除document.fileSize、img.fileSize，使用 XMLHttpRequest 可提取源。406.已删除script.onreadystatechange 和 script.readyState，改用script.onload。407.已删除document.selection，改用window.getSelection。408.已删除document.createStyleSheet，改用document.createElement("style")。409.已删除style.styleSheet，改用style.sheet。4010.已删除window.createPopup，改用 div 或 iframe（zIndex 值很高）。40第四章：其他更新40第一节：IE7-IE8更新401.文件上载控件仅向服务器提交文件路径，而不提供完整路径。40第二节：IE8-IE9更新411.预设使用者代理(UA) 字串已变更.41概述本文档内容涵盖：IE6升级到IE11过程中Javascript, DOM, HTML, CSS等方面的变化和调整。 参考依据MSDN：1. Appendix 1: Internet Explorer 6 to Internet Explorer 9 Browser Changes2. 附录 1：从 Internet Explorer 6 到 Internet Explorer 9 的浏览器更改3. Internet Explorer 9 Compatibility Cookbook4. 邊做邊學 IE9 相容性操作手冊5. Internet Explorer 11 开发人员指南第一章：HTML第一节：IE7-IE8更新1. 如果缺少结束标记的 P 元素后跟 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素，会自动添加结束标记。 MSDN原文：Unclosed P elements are now automatically closed when followed by TABLE, FORM, NOFRAMES, or NOSCRIPT elements.所属分类版本更新HTMLIE7-IE8具体描述及示例：如果缺少结束标记的 P 元素后跟 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素，会自动添加结束标记，即：TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素不能再嵌套在段落元素P中了。考虑如下代码：<html> <head> <title>Simple P Element Closing Example</title> <meta http-equiv="X-UA-Compatible" content="IE8"/> </head> <body> <p>This is the first paragraph</p> <p style="margin-left:30px">This is another paragraph. <!- P not closed -> <table border="1px" cellpadding="2px"> <tr><td>This is a table cell.</td></tr> </table> <p>This is a third paragraph.</p> </body></html>在这个例子中，第二个P元素没有关闭。在IE6, IE7下，Table元素显示为第二个p元素的子元素。第二个p元素是窗口的左边界缩进30像素。因为该表是一个P元素的子元素，它也从窗口的左边界缩进。IE7下Html结构图如下：然而，与IE8时，在默认模式下，TABLE元素对齐到左边缘。因为IE8会自动关闭显示表元素之前闭合的P元素，TABLE元素的子元素。IE8下Html结构图如下：解决方案及正确写法:请注意此特性， 在代码中规避风险。2. 支持格式正确的有效标记，不再支持格式错误的 HTML。 MSDN原文：Malformed HTML is no longer supported, in favor of well-formed, valid markup.所属分类版本更新HTMLIE7-IE8具体描述及示例：支持格式正确的有效标记，不再支持格式错误的 HTMLMalformed HTML is no longer supported, in favor of well-formed, valid markup.Parser error correction for malformed HTML has changed in IE8 Standards Mode. Pages depending on the way IE7 performs error correction may encounter issues as a result. <ul> <li>1.1 <ul> <li>1.1.1</li> </li> <!多了一个标记，will Closes 1.1 in IE8, but not IE7 -> <li>1.1.2</li> </ul> </li> </ul> 在IE8下可以看到如下效果图：解决方案及正确写法:HTML标记写法要严谨。Ensure your markup is well-formed and valid. <ul> <li>1.1 <ul> <li>1.1.1</li> <!- </li> -> <li>1.1.2</li> </ul> </li> </ul>修改后，IE8下效果图如下：3. Button标签的默认type类型从button改为submit。 所属分类版本更新HTMLIE7-IE8具体描述及示例：如果不为Button设置type属性，旧版IE会将其自动设为button类型，而从IE8开始，为了遵守W3C标准，改变了原来的默认做法，现在默认此button为submit，而非button类型。解决方案及正确写法:需要为按钮设置type类型。<button id="button1" type="button" style="width:150px;height:50px">按钮</button>4. 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性.IE6 IE7 IE8(Q) 对 COL 和 COLGROUP 元素的属性及部分 CSS 特性支持较好，而IE8(S), IE9不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性。不支持的属性截图如下：例如：colgroup和col的使用如下： <TABLE id="china" > <COLGROUP> <COL align="left" width="80"></COL> <COL align="right" width="150" style=”display:none”></COL> </COLGROUP> <THEAD> <TR> <TH align="left" name="Heading 1">日期</TH> <TH name="Heading 2">分数</TH> </TR> </THEAD> <TBODY> <TR> <TD name="Date"></TD> <TD name="Score"></TD> </TR> </TBODY> </TABLE>但IE9已经不支持页面中的align和style属性了，但还支持width属性。 因此，我们只好放弃在colgroup, col中设置样式，转而直接在td, th中设置。至于仍然支持的width属性，建议也同样修改，以保持统一的风格, 到Html5中，将不再支持width属性了.推荐资料：HE1004: IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性http:/www.w3help.org/zh-cn/causes/HE1004HTML 5 <colgroup> 标签第二节: IE8-IE9更新1. 表对象模式现在更加符合其他浏览器。MSDN原文：Table Object Model Is Now More Consistent with Other Browsers.所属分类版本更新HTMLIE8-IE9具体描述及示例：为了提高IE和其他浏览器之间的一致性，IE9的标准模式的表Table发生了以下变化：额外的THead和TFoot元素不会出现在table.tBodies集合中。这里所指的是table.tBodies属性，并不是在tBody里面放thead或者tfoot。如果有多余的thead或者tfoot，IE9模式下不会把它们计入在内，而在IE8模式下会把多余的thead或tfoot单独计入到一个tBody。Table的行集合有着不同的顺序。无论他们在文档内的顺序是什么，首先是THead内容, 其次是TBody内容，最后才是TFoot内容。调用rows统计将返回一个表内的所有层次的TR行数，包括直属TR行。也就是指把table里面的所有TR对象都计入在rows列表里面，而不论它是在根节点还是thead/tfoot/tbody里面使用getElementsByTagName和HtmlElement.children方法不返回注释节点。To improve consistency between Windows Internet Explorer and other browsers, the IE9 Standards mode includes the following changes to the table object model: Extra thead and tfoot elements do not appear in the tBodies collection.The rows collection has a different ordering. First, it includes any rows in the thead element, then all remaining rows that are not in the tfoot element, and then any rows in the tfoot element, regardless of their order in the document.A call for rows returns all rows at all depths within the table, including direct row children of the table.The getElementsByTagName and HtmlElement.children methods do not return comment nodes.如果不考虑这些变化在您的应用程序，应用程序可能会遇到次要的脚本错误，页面始终保持在加载中状态，或创建非预期内容等错误。If you do not consider these changes in your application, the application might encounter script errors that are minor, that keep pages from loading, or that create content that is not intended.考虑如下代码：<html xmlns="http:/www.w3.org/1999/xhtml"><head> <title>Table Test</title> <script type="text/javascript"> function CheckTable() var table = document.getElementById("mytable"); var tBodyResult = "有" + table.tBodies.length + "个tBodynn" var rows = table.rows; var length = rows.length; var rowResult = "" for (var i = 0; i < length; i+) rowResult += "第" + (i+1) + "行: "+ rowsi.innerHTML + "n" alert(tBodyResult + rowResult); </script></head><body><table id="mytable" > <tbody> <tr><td>Row1</td></tr> <tr><td>Row2</td></tr> </tbody> <tfoot> <tr><td>Foot</td></tr> </tfoot> <thead> <tr><td>Head1</td></tr> </thead> <thead> <tr><td>Head2</td></tr> </thead></table><button onclick="CheckTable()">Click Me</button></body></html>点击Click Me按钮，IE8将弹出提示，显示有三个tBody, 实际上只有一个tbody，但是IE8将多余的一个thead和一个tfoot都各自单独计入一个tBody里了。而IE9则不会有这个问题，只显示有一个tBody。注释：Table包含 thead、tfoot 以及 tbody 子元素， thead元素用于定义表格的表头，tfoot用于定义表格的表尾，tbody为表格中的主体内容。thead 元素应该与 tbody和 tfoot元素结合起来使用。解决方案及正确写法:注意此特性，规避风险。相关资源：2. 文本布局使用自然度量而不是图形设备接口 (GDI) 度量。MSDN原文：Text Layout Uses Natural Metrics.所属分类版本更新HTMLIE8-IE9具体描述及示例：对于IE9 标准模式中的文字版面配置， IE9 使用自然度量法，而非旧版IE 浏览器使用的图形装置介面(GDI) 度量法。GDI 度量法会将文字与像素界限对齐，而自然度量法则会使用内部像素的间距来呈现更准确且更容易阅读的文字。 。IE 的其他文件模式则继续使用GDI 度量法。针对旧版文件模式所写的页面版面配置在IE9 中可能无法正确显示。 最常見的错误是未预期的文字換行，這可能会遮盖位于换行文字下方的元素。当文字方块沒有多余的水平空间或是当文字方块的大小与頁面上的其他元素(例如图形) 相连时，很可能会发生此错误。 For text layout in IE9 Standards mode, Windows Internet Explorer 9 uses natural metrics instead of the graphical device interface (GDI) metrics that other Microsoft Windows browsers use. GDI metrics align text to pixel boundaries, but natural metrics use inter-pixel spacing to create more accurately rendered and readable text. Other document modes for Windows Internet Explorer continue to use GDI metrics.Page layouts that are written for earlier document modes might display incorrectly in Internet Explorer 9. The most common error is unexpected text wrapping, which can cover elements that are below the wrapped text. This error is most likely when a text box does not include extra horizontal space or when the size of the text box is connected to another element on the page, such as a graphic.解决方案及正确写法:不要假设特定字型的大小在不同浏览器间或是在相同浏览器内都会依相容的方式呈现，因为使用者有可能会缩放浏览器的字体 (例如，125%)。 利用下列设计准则，可确定您的网页显示文字版面配置的方式一致： 1.将Textbox的大小设定为特定的像素数。 2.在Textbox中留些余量空间，避免空间过紧。 3.使用非Static大小的Textbox。4.在与其他页面元素相连接处包含额外空间。 5.如果您允许用户改变页面字体的大小，就要请您确认页面可以适应文字换行。 6.如果您发现文字换行的问题，请您调整页面，确保页面可以恰当地呈现文字。 避免对文字版面配置采用下列设计： 1.指望字型大小在不同浏览器间以相同的方式呈现。 2.使用Static大小的textbox。关于Static大小的textbox, 含义如下例：<input type="text" style="width:100px" />这里就指定了text box的size，非静态non-statically意思是说我们不要去指定size。如果一定要指定，尽量用如上的px作为单位。Do not assume that the size of a particular font renders identically across browsers or within the same browser because users can choose a larger font display (for example, 125%).DoUse the following design guidelines to make sure that your webpages display text layout consistently:Set a text box's size to a specific number of pixels.Include extra space in your text boxes and avoid tight spaces.Use non-statically sized text boxes.Include extra space in bounding areas that depend on other page elements.Make sure your page can accommodate text wrapping if you permit users to change the page font size.Test your webpages in all common browsers. If you see a text wrapping issue, adjust the page to make sure the page appropriately renders the text.If you designed a webpage for a previous mode and you do not want to update it to use natural metrics, set the page to display in that mode even when users view it in Internet Explorer 9.Do notAvoid the following designs for text layout:Depend on font sizes to render the same way across browsers.Use static-sized text boxes.相关资源：第二章：CSS第一节：IE6-IE7更新1. 方框模型溢出内容现与方框相交，不再让方框自动增长适应内容。MSDN原文：Box model overflow content now intersects box, no longer auto-grows box div to fit content.所属分类版本更新CSSIE6-IE7具体描述及示例：在IE7中，为了适应CSS2.1 box model，微软修改了溢出的行为。溢出是用来描述当一个块元素的内容溢出它的区域时，这些内容是否被剪切掉的一种方法。默认情况下，内容不被剪切，也就是，它有可能呈现在区域以外。过去的IE不支持这个行为。内容总是需要适合区域的大小。想象一个宽和高都是100px的区域，如果内容小于100px，那么没有问题。如果内容超过了尺寸，我们需要自动增长区域大小来适合内容。In IE7, we changed the behavior of overflow to align with the CSS2.1 box model. Overflow is describes as a method to specify whether content of a block-level element is clipped when it overflows the box. The default is visible. This value (visible) indicates that content is not clipped, i.e. it may be rendered outside the box. IE in the past did not support this behavior. Content always had to fit within a box dimensions. Imagine a box with width and height of 100px. If the content is smaller than 100px then IE would follow the specifications. If the content exceeded the size we would auto-grow the box to fit the content. To demonstrate this behavior, take a look at the following code sample.请看下面的代码示例。<style type="text/css">div width : 100px; height: 100px; border: thin solid red;blockquote width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed blackcite display: block; text-align: right; border: nonep margin: 0;</style><div> <blockquote> <p>some text long enough to make it interesting.</p> <cite>- anonymous</cite> </blockquote></div>下图显示了在IE6和IE7中此段代码的不同效果，(上图为IE6，下图为IE7)：从图中可以看出，<blockquote>内容超出了div的边界，在IE7下，div不再自动增长来装下<blockquote>，而是让<blockquote>伸出div的边界。As you can see, we now honor the height and width settings of a box. In this example, the <blockquote> content now renders outside of the boundaries of the parent <div> (box with red borders). 解决方案及正确写法:请检查相关的页面设计，如果以前依赖自动增长这一特性，现在就需要修改代码，来避免页面布局显示错误的风险。If your layout relied on us "growing" the box (if your content did not fit the dimensions you gave it) then this can lead to breaks. You can easily discover breaks related to overflow by observing content suddenly overlapping other content. 相关资源：2. 不再支持某些 CSS 筛选器（如 *HTML、_underscore 和 /*/ 注释）。MSDN原文：Certain CSS filters (for example, *HTML, _underscore, and /*/ comment) are no longer supported.）所属分类版本更新CSSIE6-IE7具体描述及示例：虽然CSS标准已经存在，但是并不保证所有的浏览器用同样的方式呈现页面。这些标准可能含有未经定义的部分，并不是所有的组件等会被所有的浏览器去执行，并且已知的执行也可能存在问题。CSS标准并不提供一个方法去指定一个特定的浏览器版本，所以网络开发者社区开发了CSS filter（也被称作”CSS hacks”）。这些filter利用浏览器的问题或者未执行的特性来隐藏针对特殊浏览器的CSS样式规则。当我们修复了这些问题并且改进了CSS支持后，一些CSS filter将不再可用。如果你使用这些filters，你应该了解它们的效果。这个可以帮助你做出针对以后版本的Internet Explorer和其它浏览器的更有效的并且适应改进后的CSS的设计。在IE7中，我们修改了许多潜在解析错误，这些错误有可能会阻止下面的filter在以前的IE版本中正常工作。如果你的页面中包含这些filter，请去除或者更换它们。Even though standards like CSS are available it is not a guarantee that all browsers render the same way. The standard might have unde
