CSS兼容性解决方案：IE6.0、IE7.0与Firefox

需积分: 9 192 浏览量更新于2024-10-06 收藏 52KB DOC 举报

"这篇文章主要探讨了如何解决IE6.0、IE7.0与Firefox浏览器之间的CSS兼容性问题，提供了一系列具体的解决策略和技术细节。" 在网页开发中，跨浏览器的CSS兼容性一直是一个挑战，尤其是在面对IE6.0、IE7.0以及Firefox等不同浏览器时。以下是一些关键的CSS兼容性解决方案： 1. **DOCTYPE声明**：不同的DOCTYPE会影响浏览器进入不同的渲染模式。在HTML文档开头添加标准的DOCTYPE如`<!DOCTYPE html>`可确保浏览器以标准模式解析CSS，减少兼容性问题。 2. **居中对齐**：Firefox中，通过设置`margin-left`和`margin-right`为`auto`可以让`div`居中，但IE可能需要额外的处理，如设置`text-align: center`于`body`，并使`div`的`margin`自动。 3. **填充与尺寸**：Firefox在应用`padding`后会改变`div`的高度和宽度，而IE不会。为保持一致，可以使用`!important`强制设置`height`和`width`。 4. **`!important`规则**：Firefox支持`!important`来覆盖其他样式，但IE不识别。可以利用这一点为Firefox单独设定样式，如`color: red !important;`。 5. **垂直居中**：使用`vertical-align: middle;`和`line-height`可以使内容在`div`内垂直居中，但需注意防止内容换行。 6. **游标样式**：`cursor: pointer`在IE和Firefox中都能显示手形指针，而`cursor: hand;`仅适用于IE。 7. **链接样式**：在Firefox中，为链接添加边框和背景色需设置`display: block`和`float: left`以防止换行。同时，设定链接和容器的高度有助于避免布局错位。 8. **盒模型差异**：Firefox和IE对盒模型的解释不同，可以使用条件注释或负边距来补偿2px的差异，如`margin:30px!important;margin:28px;`。 9. **列表样式**：Firefox和IE对`ul`的默认`margin`和`padding`处理不同，统一设置`ul{margin:0;padding:0;}`可解决问题。 10. **浮动元素**：浮动元素（如`float: left`）必须正确闭合，以防止布局混乱。例如，用`</div>`关闭每个浮动的`div`。 11. **CSS Hack**：有时需要使用特定的CSS hack，如针对IE的`_property`或`*property`，以及针对Firefox的`-moz-`前缀。在处理这些兼容性问题时，开发者应遵循良好的前端工程实践，如使用预处理器（如Sass或Less）来管理CSS，使用 normalize.css 或 reset.css 重置浏览器默认样式，以及采用条件注释或特性检测来应用特定的浏览器样式。此外，持续测试并在多个浏览器和版本上验证样式是确保兼容性的关键步骤。

IE6.0、IE7.0 与 FireFox CSS 兼容的解决方法

1.DOCTYPE 影响 CSS 处理

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可

居中

4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个

height 和 width

5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

6.div 的垂直居中问题 : vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-

height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照

menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar

中插入一个空格。

9. 在 mozilla firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法：

div{margin:30px!important;margin:28px;}注意这两个 margin 的顺序一定不能写反，据阿捷的

说法! important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这

样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写

margin:XXpx! important;

11.ul 标签在 Mozilla 中默认是有 padding 值的 , 而在 IE 中只有 margin 有值所以先定义

ul{margin:0;padding:0;}就能解决大部分问题

注意事项：

1、float 的 div 一定要闭合。

例如：(其中 floatA、floatB 的属性已经设置为 float:left;) <#div id=”floatA” ></#div>

<#div id=”floatB” ></#div>

<#div id=”NOTfloatC” ></#div>这里的 NOTfloatC 并不希望继续平移，而是希望往下排。

这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必须将 float

标签闭合。

在 <#div class=”floatB”></#div>

<#div class=”NOTfloatC”></#div>之间加上 <#div class=”clear”></#div>这个 div 一定要注意

声明位置，一定要放在最恰当的地方，而且必须与两个具有 float 属性的 div 同级，之间不

能存在嵌套关系，否则会产生异常。

并且将 clear 这种样式定义为为如下即可： .clear{

clear:both;}此外，为了让高度能自动适应，要在 wrapper 里面加上 overflow:hidden;

当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该触发 IE 的 layout 私有

属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。

例如某一个 wrapper 如下定义： .colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

2、margin 加倍的问题

设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。

解决方案是在这个 div 里面加上 display:inline;

下载后可阅读完整内容，剩余9页未读，立即下载

ljqjijiji

粉丝: 0
资源: 8

CSS兼容性解决方案：IE6.0、IE7.0与Firefox

CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)

CSS浏览器兼容性解析：IE6.0、IE7.0与Firefox问题解决

CSS浏览器兼容性完全指南：IE6.0、IE7.0与Firefox解决策略

弹窗式日期控件兼容IE 6.0、7.0和 FF 2.0浏览器

万年历-支持IE6.0版本以上、Firefox

CSS浏览器兼容全解析：IE6/7/Firefox问题与解决技巧

CSS浏览器兼容性的各种代码解决方案

不同版本IE使用不同css(css条件注释语句用法)

css中!important的作用(IE6 IE7 FF)及其原理

最新资源