(十年积累)div+css_完全兼容ie6_ie7_IE8_IE9_和firefox方法.doc

### (十年积累)div+css_完全兼容ie6_ie7_IE8_IE9_和firefox方法 #### 一、概述 本文档旨在分享一种基于 `div` 和 `CSS` 的网页布局技术，该技术确保了在不同版本的 Internet Explorer（IE6、IE7、IE8、IE9）以及 Firefox 浏览器中的兼容性。随着 Web 技术的发展，不同的浏览器及其版本对于网页的渲染方式存在着差异，这给开发者带来了挑战。本文档将详细介绍几种常见且实用的技巧，帮助开发者轻松实现跨浏览器兼容。 #### 二、核心兼容性技术详解 ##### 2.1 浏览器兼容性符号表 为了更好地理解兼容性技术，首先介绍一组特殊的 CSS 选择器及属性值，它们被用来区分不同的浏览器版本： - **符号**： - `*`: 所有浏览器均支持。 - `!important`: Firefox 支持，但 IE6/IE7 不支持。 - `_`: 仅 IE6/IE7 支持。 - `\9`: 仅 IE8 支持。 - `*html`: 仅 IE6 支持。 - `*+html`: 仅 IE7 支持。 这些符号可以用来编写特定于某个浏览器或浏览器版本的 CSS 规则。 ##### 2.2 具体案例分析 **案例一**：假设需要设置一个元素 `.warp` 的高度在不同浏览器下有所不同。 ```css .warp { height: 100px; /* IE6、IE7、IE8、FF 识别 */ height: 110px\9; /* IE8 识别 */ *height: 120px !important; /* IE7 识别 */ height: 130px; /* IE6、IE7 识别，但上一段代码中 !important 的级别比 *号的级别高，所以此段代码只有 IE6 中才有效 */ } ``` **案例解读**： - `.warp { height: 100px; }` 被所有浏览器识别。 - `.warp { height: 110px\9; }` 仅被 IE8 识别。 - `.warp { *height: 120px !important; }` 由于 `!important` 优先级较高，被 Firefox 识别。 - `.warp { height: 130px; }` 在没有更高优先级的情况下被 IE6 和 IE7 识别，但由于 `!important` 的存在，IE7 会采用 120px 的高度。 **案例二**：当需要处理不同浏览器下的居中对齐问题时。 - **原理**： 1. **DOCTYPE** 对 CSS 的处理方式有影响。 2. **Firefox**：设置 `div` 的 `margin-left` 和 `margin-right` 为 `auto` 时，该元素会自动居中；IE 则不行。 3. **Firefox**：当为 `body` 设置 `text-align` 时，`div` 需要设置 `margin: auto`（主要是 `margin-left` 和 `margin-right`）才能居中。 4. **Firefox**：设置 `padding` 后，`div` 的高度和宽度会增加，而 IE 不会；因此需要用 `!important` 来为 Firefox 设置额外的高度和宽度。 5. **Firefox**：支持 `!important`，IE 忽略；可用 `!important` 为 Firefox 特别设置样式。 **案例代码**： ```css .container { margin: auto; width: 200px; height: 200px; background-color: #f1f1f1; } /* IE6/IE7 */ .container { *width: 202px; } /* Firefox */ .container { width: 200px !important; } ``` #### 三、其他常见兼容性问题及解决方案 1. **垂直居中**：通过设置行距和 `vertical-align: middle;` 实现，但需注意内容不要换行。 2. **鼠标指针形状**：`cursor: pointer;` 可以在 IE 和 Firefox 中显示为手指形状，而 `hand` 仅在 IE 中有效。 3. **链接样式**：为链接设置 `display: block` 和 `float: left` 可以保证在 Firefox 中不会换行。 4. **BOX 模型差异**：Mozilla Firefox 和 IE 中的 BOX 模型解释不一致，可以通过重复定义 `margin` 并使用 `!important` 来解决。 ##### 3.1 浮动元素闭合问题 **问题**：当存在浮动元素时，非浮动元素可能会继续水平排列，而非向下排列。 **解决方案**：使用 `clear` 属性。 ```html <div class="floatA" style="float: left;">Float A</div> <div class="floatB" style="float: left;">Float B</div> <div class="clear"></div> <div class="NOTfloatC">Not Float C</div> ``` ```css .clear { clear: both; } ``` **注意事项**： - 浮动元素必须正确闭合。 - `clear` 类必须与浮动元素处于同一级，且位于它们之后。 - 确保 `clear` 类的使用符合预期，避免不必要的嵌套。 #### 四、总结 通过本文档的学习，您可以掌握如何利用特定的选择器和属性值来实现 `div` 和 `CSS` 布局在不同版本的 IE 和 Firefox 中的一致表现。这些技术虽然看似复杂，但在实际应用中非常实用。随着 Web 标准的发展，尽管很多旧版浏览器已不再主流，但对于仍需支持这些浏览器的项目来说，掌握这些兼容性技巧仍然至关重要。