解决IE兼容问题

### 解决IE兼容问题 #### 概述 随着Internet Explorer（IE）从版本6逐步升级至版本11，浏览器在渲染网页、解析HTML、执行CSS和JavaScript等方面发生了显著变化。这些变化导致许多早期开发的网站在新版本的IE中无法正常显示或运行，即所谓的“兼容性问题”。为了解决这些问题，开发者需要对旧有的代码进行相应的调整。 #### 第一章：HTML **第一节：IE7-IE8更新** 1. **P元素的结束标记处理**：在IE7中，如果一个`<p>`元素后面紧跟了一个`<table>`, `<form>`, `<noframes>`, 或`<noscript>`元素而没有结束标记`</p>`，浏览器会自动添加结束标记。这一变化提高了HTML文档的有效性，减少了因为遗漏结束标记而导致的布局问题。 2. **支持有效的HTML标记**：IE8开始只支持格式正确的HTML文档，不再支持格式错误的HTML标记。这意味着开发者需要确保他们的HTML文档是完全有效的，否则可能会遇到兼容性问题。 3. **Button标签的默认type类型**：从IE8开始，`<button>`标签的默认`type`属性从`button`改为`submit`。这会影响表单的行为，开发者需要注意检查表单中按钮的行为是否符合预期。 4. **COL及COLGROUP元素的限制**：IE8不再支持`<col>`及`<colgroup>`元素的部分属性及其对应的CSS特性。这意味着使用这些元素和属性时需要额外注意兼容性问题。 **第二节: IE8-IE9更新** 1. **表对象模式的改进**：IE9中表对象模式更加接近其他现代浏览器的表现，这对于跨浏览器的兼容性非常重要。 2. **文本布局的改进**：文本布局使用自然度量而非GDI度量，这改善了文本的显示效果，特别是在缩放时。 #### 第二章：CSS **第一节：IE6-IE7更新** 1. **方框模型的变化**：在IE7中，当方框模型的内容溢出时，不再使方框自动增长来适应内容，而是让内容与方框相交。这种变化对于页面布局有较大影响。 2. **不再支持某些CSS筛选器**：IE7不再支持某些特殊的CSS筛选器（如`*HTML`, `_underscore`和`/**/`注释），这可能会影响到CSS样式的应用。 3. **SELECT元素问题的修复**：解决了`<select>`元素无法被`<div>`覆盖的问题，这对于实现更复杂的UI设计非常有用。 4. **CSS样式的大小写敏感性**：从IE7开始，CSS样式名区分大小写，例如`background-color`与`background-color`被视为不同的属性。 5. **样式单位的要求**：在IE7中，`style`中的`height`和`width`属性需要明确指定单位，如`px`、`em`等。 **第二节：IE7-IE8更新** 1. **不再支持CSS表达式**：IE8不再支持CSS表达式，取而代之的是支持增强的CSS或DHTML逻辑，这对开发者的编码习惯有一定的影响。 **第三节：IE8-IE9更新** 1. **泰语和东亚语文本的显示**：IE9在显示泰语和东亚语文本以及字体大小方面可能存在一些差异，这可能需要开发者针对特定语言做出调整。 2. **XML模式下的限制**：某些行为连接方法在IE9的XML模式下不再可用。 **第四节：IE9-IE10更新** 1. **废弃CSS behavior**：IE10不再支持`CSSbehavior`，并完全废弃了`htc`表达式。这对于依赖于这些特性的网站来说需要特别注意。 #### 第三章：JavaScript and DOM **第一节：IE6-IE7更新** 1. **window.close提示的限制**：IE7不再允许使用window.opener技巧来绕过`window.close`的提示。 2. **模式或无模式对话框的变化**：在IE7中，从脚本创建的模式或无模式对话框看起来稍微变大，这可能会影响用户体验。 **第二节：IE7-IE8更新** 1. **支持class语法**：IE8开始支持`class`语法，不再支持`className`属性语法。这是一个重要的变化，对于开发者来说需要注意。 2. **属性集合的变化**：属性集合不再包含所有可能的属性，这可能会影响到某些JavaScript代码的兼容性。 3. **getElementById的变化**：IE8中`getElementById`现在区分大小写，并且不再搜索名称属性。 4. **currentStyle对象的变化**：`currentStyle`对象的`Unset`属性现在返回其初始值。 5. **style对象的变化**：`style`对象的`Unset`属性值现在返回空字符串。 **第三节：IE8-IE9更新** 1. **createElement方法的限制**：在IE9中，`createElement`方法不允许使用尖括号`<>`。 2. **arguments.caller属性的限制**：IE9的标准模式下不支持`arguments.caller`属性。 3. **函数指针调用的变化**：不再支持不带`.call`或`.bind`的函数指针调用方法。 4. **DOM expando的变化**：不再连接内容属性和DOM expando。 5. **JavaScript属性列举的变化**：IE9中JavaScript属性列举的方式有所不同。 6. **数学精确度的变化**：IE9中数学精确度有所不同。 7. **间接“eval”函数调用的变化**：IE9中间接“eval”函数调用的行为方式不同。 8. **处理大型索引数组项目的方式**：IE9处理含有大型索引的数组项目的方式有所不同。 9. **重叠元素的变化**：IE9中重叠元素会被复制。 10. **DOM中保留空格**：IE9中DOM中会保留空格。 11. **部分DOM事件的过时**：IE9中部分DOM事件已过时。 **第四节：IE10-IE11更新** 1. **事件监听器的变化**：IE11已删除`attachEvent`，改为使用`addEventListener`。 2. **废弃window.execScript**：IE11已删除`window.execScript`，改用`eval`。 3. **废弃window.doScroll**：IE11已删除`window.doScroll`，改用`window.scrollLeft`、`window.scrollTop`。 4. **废弃document.all**：IE11已删除`document.all`，改用`document.getElementById`。 5. **废弃fileSize属性**：IE11已删除`document.fileSize`、`img.fileSize`，可以使用XMLHttpRequest提取源。 6. **废弃script.onreadystatechange**：IE11已删除`script.onreadystatechange`和`script.readyState`，改用`script.onload`。 7. **废弃document.selection**：IE11已删除`document.selection`，改用`window.getSelection`。 8. **废弃document.createStyleSheet**：IE11已删除`document.createStyleSheet`，改用`document.createElement("style")`。 9. **废弃style.styleSheet**：IE11已删除`style.styleSheet`，改用`style.sheet`。 10. **废弃window.createPopup**：IE11已删除`window.createPopup`，改用`div`或`iframe`（zIndex值很高）。 #### 第四章：其他更新 **第一节：IE7-IE8更新** 1. **文件上传控件的变化**：IE8中文件上传控件仅向服务器提交文件路径，不再提供完整的路径。 **第二节：IE8-IE9更新** 1. **用户代理字符串的变化**：IE9中预设的用户代理（UA）字符串已发生改变。 从IE6到IE11的过程中，浏览器在HTML、CSS、JavaScript和DOM等方面经历了许多重要的变化。开发者需要密切关注这些变化，并对现有的网站和应用程序进行适当的调整，以确保它们能够在新的浏览器版本中正常工作。此外，随着现代浏览器的发展，越来越多的新特性被引入，开发者还应该考虑使用最新的Web技术来提升用户体验和性能。