CSS兼容性详解：IE6、IE7与Firefox的解决方案

需积分: 9 33 浏览量更新于2024-10-19 收藏 69KB DOC 举报

"了解和掌握DIV+CSS设计时与IE6、IE7、Firefox（FF）浏览器的兼容性问题对于创建跨浏览器的网站至关重要。本文详细介绍了这些浏览器在处理CSS样式时的一些特性和解决兼容性问题的方法。" 在网页设计中，尤其是在使用DIV+CSS布局时，确保各浏览器之间的兼容性是一项挑战。不同的浏览器对CSS规范的实现可能存在差异，这可能导致在Internet Explorer（IE6、IE7）和Firefox之间出现显示不一致的问题。以下是一些关键的兼容性特性及解决方案： 1. **CSS Hack** - `_height:100px;` 是专门为IE6设计的，因为IE6不识别标准的`height`属性。 - `*height:100px;` 适用于IE7，因为它识别星号前缀的属性。 - `*+height:100px;` 是IE7和Firefox共用的，但需注意Firefox可能忽略星号加加号的规则。 - `height:100px!important;` 这个在所有支持`!important`的浏览器中都会生效，包括IE7和Firefox。 2. **CSS兼容性解决方法** - 使用`!important`可以强制应用某个样式，但这种方法不推荐，因为可能导致样式难以管理和维护。当`!important`用于IE7和Firefox时，应确保IE6的样式写在前面。 - IE6和IE7的特定CSS Hack，如`*html`和`*+html`，可以帮助定位到特定版本的IE。`*html`适用于IE6，而`*+html`则针对IE7。Firefox不识别这些特性，所以它们不会影响Firefox的渲染。 3. **DOCTYPE声明** - 在HTML文档的顶部添加正确的DOCTYPE声明，如`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`，可以触发IE7的标准模式，从而更好地遵循CSS标准。 4. **浮动元素的闭合（Clear Float）** - 为了处理浮动元素引起的父级高度塌陷问题，可以使用一种名为“clearfix”的技巧。在全局CSS中定义一个类 `.clearfix`，然后将其应用到包含浮动元素的容器上。这样可以确保容器正确包裹其内容，而无需添加额外的结构标记。 ```css /* ClearFix */ .clearfix:after { content: ""; display: table; clear: both; } ``` 这种方法通过创建一个伪元素并应用`clear:both`来清除浮动，适用于所有现代浏览器，包括IE7及以上版本。处理IE6、IE7和Firefox的兼容性问题需要对CSS Hack有一定了解，并且要善用DOCTYPE声明、浮动元素的闭合等技术。同时，随着浏览器的更新迭代，应逐渐减少对旧版IE的特殊支持，转向更现代的浏览器兼容性策略，如渐进增强和优雅降级。

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等

问题.

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见

于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

7, 关于手形光标. cursor: pointer. 而 hand 只适用于 IE.贴上代码:

兼容代码:兼容最推荐的模式。

/* FF */

.submitbutton {

float:left;

width: 40px;

height: 57px;

margin-top: 24px;

margin-right: 12px;

}

/* IE6 */

*html .submitbutton {

margin-top: 21px;

}

/* IE7 */

*+html .submitbutton {

margin-top: 21px;

}

什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页

面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在

编写 CSS 的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问

题。而兼容就是一种办法，能让你在一个 CSS 里面独立的写支持不同浏览器的样式。这下

就和谐了。呵呵！

最近微软发布的 IE7 浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽

然 IE7 已经走向标准化，但还是有许多和 FF 不同的地方，所以需要用到 IE7 的兼容，有许

多朋友问过 IE7 的兼容是什么，其实我也不知道。暂时还没找到 IE7 专用的兼容。除了前

面那片文章，《针对 firefox ie6 ie7 的 css 样式》中的兼容方式也是很好用的。

有一点逻辑思想的人都会知道可以用 IE 和 FF 的兼容结合起来使用，下面介绍三个兼容，

例如：（适合新手，呵呵，高手就在这里路过吧。）

程序代码

第一个兼容，IE FF 所有浏览器公用（其实也不算是兼容）

height:100px;

剩余10页未读，继续阅读

ysbdy

粉丝: 0

CSS兼容性详解：IE6、IE7与Firefox的解决方案

解决div+css布局在IE6、IE7、FF浏览器的兼容性问题

div+css跨IE6-7-FF兼容技巧汇总

解决DIV+CSS在IE与Firefox下的兼容性问题

DIV+CSS 兼容性 IE FF

DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf

DIV+CSS相对IE6 IE7和IE8浏览器行为区别及兼容性问题整理

(十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.docx

DIV+CSS设计时浏览器兼容性问题.pdf

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.pdf

如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

最新资源