IE6兼容心得(自己总结的)资源-CSDN文库

需积分: 10 163 浏览量 2014-11-30 13:12:52 上传评论 2 收藏 897KB PDF 举报

### IE6兼容心得 #### 一、文档类型与IE6怪异模式为了确保网站能够在Internet Explorer 6 (IE6)等旧版浏览器中正确显示，文档类型（DOCTYPE）的选择至关重要。DOCTPYE用于告知浏览器该网页所遵循的HTML标准，这有助于浏览器正确解析页面并呈现出预期的效果。如果文档类型缺失或不符合标准，则可能导致IE6进入一种被称为“怪异模式”（Quirks Mode）的状态，在这种状态下，浏览器将采用较为宽松且向后兼容的渲染方式，这往往会导致布局问题。 - **HTML4.01 Transitional**: 这种DOCTYPE用于支持HTML4.01 Transitional标准，它允许某些非标准或过时的标记。使用此文档类型的HTML文件将被IE6以相对正常的方式呈现，除非遇到特定的标记错误或布局问题。 ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ``` - **HTML4.01 Frameset**: 当页面包含框架集时使用。此DOCTYPE将告知浏览器页面采用了HTML4.01 Frameset标准。 ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> ``` - **XHTML1.0 Strict**: XHTML是一种更严格的HTML版本，旨在提高文档的一致性和结构清晰度。XHTML1.0 Strict是最严格的XHTML标准之一，不允许任何废弃的标记或属性。 ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ``` - **XHTML1.0 Transitional**: 类似于HTML4.01 Transitional，XHTML1.0 Transitional也允许某些非标准的标记，但整体上更加注重文档的语义化和结构完整性。 ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ``` - **XHTML1.0 Frameset**: 此DOCTYPE用于定义使用XHTML1.0 Frameset标准的框架集文档。 ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> ``` - **XHTML1.1**: 这是最新的XHTML标准之一，提供了对模块化和扩展性的支持。 ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ``` 选择正确的DOCTYPE对于避免IE6的怪异模式至关重要，尤其是在前端开发过程中处理跨浏览器兼容性问题时。 #### 二、Stacking Contexts与IE6 **Stacking Contexts**（堆叠上下文）是指在CSS中定义的视觉层叠顺序。在现代浏览器中，元素可以通过`z-index`属性来控制它们在页面中的层次关系。然而，在IE6中，层叠上下文的行为有所不同，具体规则如下： 1. **父级Stacking Context的背景、边界** 2. **z-index值为负值的定位元素**（值越小越靠下） 3. **文本流中非定位的Block块级子元素** 4. **脱浮流动态文本** 5. **文本流中非定位的Float浮动子元素/文字元素** 6. **脱块文本/行内元素** 7. **z-index：auto/0的定位元素** 8. **z-index值为正的定位元素**（值越大越靠上） #### 三、垂直滚动条的处理 IE6默认会显示垂直滚动条，即使内容并不需要滚动。为了解决这个问题，可以使用`overflow:auto`属性来确保滚动条仅在必要时出现。 ```css html { overflow: auto; } ``` #### 四、IE6特定的CSS Hack 为了兼容IE6，开发者经常需要使用特定的技术来解决CSS渲染问题，例如： - **CSS表达式**: 可以使用CSS表达式来动态设置样式。 - **条件注释**: 条件注释允许在HTML中嵌入特定于IE版本的代码或链接到特定版本的CSS文件。 ```html  ``` 此外，还可以通过以下方式指定不同的CSS样式： - `_width: 500px;` （仅对IE6生效） - `+width: 500px;` （对IE6/IE7生效） - `width: 500px!important;` （对非IE6浏览器生效）这些技术在实际应用中非常有用，可以帮助开发者解决IE6带来的各种兼容性挑战。

资源推荐

资源详情

资源评论