如何解决Firefox检测不到div高度问题

解决Firefox检测不到div高度问题的方法 来源：黄超

[点击放大]

    做页面，经常会被浏览器兼容性搞的头大，因为现在的浏览器真的是太多太多了。有个朋友问我，在用Div和Css做页面的时候，为什么Div在Firefox中的高度不是自适应的？背景随高度缩在一起？而在IE中一切正常。

    这是由于div中的内容使用了浮动float属性，以致Firefox没有检测到高度而产生问题，而IE则可以正常检测到高度，所以对于IE和Firefox需要分开对待。

    如图一中所示，在外部名为box的div中包含了两个div，左边的为left，向左浮动，右边的为right，向右浮动，CSS和Html代码如下：

    CSS代码：

 <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>

    Html代码：

 <div id="box">
  <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代码如下：

 #box:after {
  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="box" class="clear">
  <div id="left">left</div>
  <div id="right">right</div>
  </div>

    这种方法可以算是无懈可击了，请您放心使用！

    以上三种方法都可以解决Firefox检测不到div高度的问题，具体使用哪种，还看你的情况和感觉，这里仅作为参考，希望对你有所帮助。