CSS兼容IE与Firefox技巧详解

需积分: 9 185 浏览量更新于2024-11-02 收藏 48KB DOC 举报

"让CSS兼容IE和Firefox的技巧集合" 在Web开发中，CSS（层叠样式表）的浏览器兼容性问题一直是开发者面临的一大挑战，尤其是IE（Internet Explorer）和Firefox之间的差异。以下是一些关键的CSS技巧，可以帮助你解决这些兼容性问题。 1. **垂直居中问题**：当需要使内容在div中垂直居中时，可以使用`vertical-align: middle;`配合`line-height`。将`line-height`设置为与div相同的高度，然后在其中插入文本，即可实现垂直居中。但这种方法需要注意防止文本换行。 2. **IE的margin加倍问题**：在IE浏览器中，设置为浮动（`float`）的div，其margin值会被加倍。解决这个问题的方法是在该div内部添加`display: inline;`，如： ``` <div id="imfloat"> ``` 对应的CSS： ``` #imfloat{ float: left; margin: 5px; /* IE下理解为10px */ display: inline; /* IE下再理解为5px */ } ``` 3. **浮动元素的双倍距离问题**：在IE中，浮动元素（`float`）可能会导致margin出现双倍距离。通过设置`display: inline;`可以修复这个问题，如下所示： ``` #box{ float: left; width: 100px; margin: 0 0 0 100px; display: inline; // 使浮动忽略 } ``` 4. **块级元素与内联元素的区别**：块级元素（block elements）如`div`，通常从新行开始，可以设置宽高、行高和边距；而内联元素（inline elements）如`span`，则与其他元素在同一行显示，无法直接设置宽高。 5. **IE与最小宽度和高度**： IE不支持`min-width`和`min-height`属性，但默认将`width`和`height`视为包含最小值。为解决这个问题，可以使用条件注释或HTML5的特性检测来为IE设置不同的样式： ``` #box{ width: 80px; height: 35px; } html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px; } ``` 6. **DOCTYPE的影响**：使用XHTML或HTML5标准编写代码，并在文档头部添加正确的DOCTYPE声明，如`<!DOCTYPE html>`，有助于确保浏览器按照标准模式解析CSS，从而减少兼容性问题。 7. **使用浏览器前缀**：对于一些新的CSS特性，如渐变、阴影等，IE和Firefox可能需要特定的前缀，如`-moz-`（Firefox）和`-ms-`（IE）。确保在编写CSS时添加这些前缀。 8. **使用CSS重置或Normalize.css**： CSS重置或Normalize.css可以消除不同浏览器之间的默认样式差异，为所有元素提供一个一致的基础样式。 9. **使用条件注释**：在HTML中，可以使用条件注释来针对特定版本的IE应用特定的CSS，如``。通过理解和运用这些技巧，你可以有效地处理CSS在IE和Firefox之间的兼容性问题，让网页在不同浏览器下保持一致的视觉效果和功能。不过，随着IE浏览器逐渐被淘汰，更多的开发工作转向了现代浏览器，如Chrome、Firefox、Safari和Edge，对于新的项目，建议使用最新的Web标准和开发工具，以减少兼容性问题。

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

float 标签闭合。在＜ #div class=”floatB”> ＜ #div class=”NOTfloatC”> 之间加上＜ #div

class=”clear”>这个 div 一定要注意位置，而且必须与两个具有 float 属性的 div 同级，之间不

能存在嵌套关系，否则会产生异常。并且将 clear 这种样式定义为为如下即可：

.clear{ clear:both;}

　　②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在 wrapper 里面加

上 overflow:hidden; 当包含 float 的 box 的时候，高度自动适应在 IE 下无效，这时候应该触

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

　　例如某一个 wrapper 如下定义：

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

　　③对于排版,我们用得最多的 css 描述可能就是 float:left.有的时候我们需要在 n 栏的

float div 后面做一个统一的背景,譬如:

＜div id=”page”>

＜div id=”left”>＜/div>

＜div id=”center”>＜/div>

＜div id=”right”>＜/div>

＜/div>

　　比如我们要将 page 的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是

我们会发现随着 left center right 的向下拉长,而 page 居然保存高度不变,问题来了,原因在于

page 不是 float 属性,而我们的 page 由于要居中,不能设置成 float,所以我们应该这样解决

＜div id=”page”>

＜div id=”bg” style=”float:left;width:100%”>

＜div id=”left”>＜/div>

＜div id=”center”>＜/div>

＜div id=”right”>＜/div>

＜/div>

　　再嵌入一个 float left 而宽度是 100%的 DIV 解决之

　　④万能 float 闭合(非常重要!)

　　关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代

码加入 Global CSS 中,给需要闭合的 div 加上 class="clearfix" 即可,屡试不爽.

/* Clear Fix */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

　　或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

　　8．高度不适应

剩余10页未读，继续阅读

caozongzhe

粉丝: 0
资源: 5

CSS兼容IE与Firefox技巧详解

CSS兼容IE和Firefox的技巧集合

CSS兼容IE和Firefox的技巧集合.rar

"专业 CSS兼容IE和Firefox技巧集合

CSS兼容IE与Firefox技巧详解

JS和CSS的IE和Firefox兼容性

javascript和css在IE和Firefox中的不同点及解决兼容性的方案

IE与Firefox的CSS兼容大全.rar

Javascript的IE和Firefox兼容性问题集合

ie和firefox不兼容的解决方法集合

IE与FF的CSS兼容问题大集合

最新资源