《
如何解决Firefox检测不到div高度问题》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302340N2013.htm
针对这种情况有三种解决方法：
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代码如下：
这段CSS是在box的最后插入一个不显示单暗藏掉的“.”，它可以扫除浮动，可以起到效果，而且IE阅读器不支撑:after伪元素，所以对它毫无影响。
这种方法的优点是只要要在CSS代码中操作即可，不需要在Html中加任何代码，真正做到了“分别”，缺陷是每一个id都要在CSS中加一段清除代码，不外结合上面的第二种方法，这种方法的缺点可以得到改良,如何解决CSS在IE8下的兼容性问题，由此进化出第四种方法——将class和伪元素联合，让内部带有浮动的div被带有清除属性的class定义。
实在做起来很简略，先用第三种办法的CSS定义一个class，CSS代码如下：
<div id="box" class="clear">
<div id="left">left</div>
<div id="right">right</div>
</div>
Html代码：
<style type="text/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>,
如何能让网站配色方案更吸引人？;
Tag： Firefox Div高度 Firefox Div高度
解决方法：
如上图做页面，常常会被浏览器兼容性搞的头大，由于当初的浏览器真的是太多太多了。有个友人问我，在用Div和Css做页面的时候，为什么Div在Firefox中的高度不是自适应的,如何编写优质的需求文档？背景随高度缩在一起？而在IE中所有正常。
这是因为div中的内容使用了浮动float属性，以至Firefox不检测到高度而发生问题，而IE则可以畸形检测到高度，所以对IE和Firefox须要离开看待。
如图一中所示，在外部名为box的div中包括了两个div，左边的为left，向左浮动，右边的为right，向右浮动，CSS跟Html代码如下：
CSS代码：
<div id="box">,
如何编写优质的API文档;
<div id="left">left</div>,
如何给网页加密;
<div id="right">right</div>
</div>
#box:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
写好这段CSS之后，让所有被浮动后果去掉高度的div的class是clear就能够了，比方：
.clear:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
--> [
网站建设之]如何解决Firefox检测不到div高度问题
在IE中的效果和图一中效果雷同，但在Firefox中效果如图二所示，背景随高度缩到了顶部。
这种方式可以算是无懈可击了，请你释怀应用！
以上三种方法都可以解决Firefox检测不到div高度的问题，详细使用哪种，还看你的情形和感到，这里仅作为参考，盼望对你有所辅助。
(责任编辑：网站建设)
如何解决Firefox检测不到div高度问题相关文章