如何解决Firefox检测不到div高度问题
如上图做页面,经常会被浏览器兼容性搞的头大,因为现在的浏览器真的是太多太多了。有个朋友问我,在用Div和Css做页面的时候,为什么Div在Firefox中的高度不是自适应的?背景随高度缩在一起?而在IE中一切正常。
这是由于div中的内容使用了浮动float属性,以致Firefox没有检测到高度而产生问题,而IE则可以正常检测到高度,所以对于IE和Firefox需要分开对待。
如图一中所示,在外部名为box的div中包含了两个div,左边的为left,向左浮动,右边的为right,向右浮动,CSS和Html代码如下:
CSS代码:
<!--
body {
font-size: 12px;
}
#box {
background:#fafafa;
border:1px solid #dfdfdf;
padding:20px;
width:300px;
}
#left,
#right {
width:120px;
height:120px;
border:1px solid #00a1e9;
background:#ddf4ff;
text-align:center;
}
#left {
float:left;
}
#right {
float:right;
}
-->
</style>
Html代码:
<div id="left">left</div>
<div id="right">right</div>
</div>
在IE中的效果和图一中效果相同,但在Firefox中效果如图二所示,背景随高度缩到了顶部。
针对这种情况有三种解决方法:
1.给box增加一个高度
直接在CSS中给#box添加一个高度属性,比如height:125px;。
这种方法的优点是简单,缺点是使div不会按内容的高度自动适应。
2.增加一个清除浮动元素
这种方法通常是加入一个带有清除属性的元素,一般都是加入一个div,例如:
在CSS中添加.clear {clear:both;},在Html中加入<div class="clear"></div>,如图三所示。
这种方法的优点是使用简单,缺点是要在每一个带浮动的div内都要加一个清除的div。
3. 用CSS伪元素:after
伪元素:after是在元素内容的最后面插入内容,利用它可以在box后插入一个清除浮动的元素,CSS代码如下:
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
这段CSS是在box的最后插入一个不显示单隐藏掉的“.”,它可以清除浮动,可以起到效果,而且IE浏览器不支持:after伪元素,所以对它毫无影响。
这种方法的优点是只需要在CSS代码中操作即可,不需要在Html中加任何代码,真正做到了“分离”,缺点是每一个id都要在CSS中加一段清除代码,不过结合上面的第二种方法,这种方法的缺点可以得到改善,由此进化出第四种方法——将class和伪元素结合,让内部带有浮动的div被带有清除属性的class定义。
其实做起来很简单,先用第三种方法的CSS定义一个class,CSS代码如下:
.clear:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
写好这段CSS之后,让所有被浮动效果去掉高度的div的class是clear就可以了,比如:
<div id="left">left</div>
<div id="right">right</div>
</div>
这种方法可以算是无懈可击了,请您放心使用!
以上三种方法都可以解决Firefox检测不到div高度的问题,具体使用哪种,还看你的情况和感觉,这里仅作为参考,希望对你有所帮助。