ie6与ie7、ff有个不同的特征，就是ie6内容的高度可以直接影响到元素的高度，所以可以不用固定高度的方法达到自适应高度的目的。但是在ie7和firefox（ff）中，内容将不影响固定高度的容器：比如一下代码：
.content{width:400px;background:#ccc;}
.float1{float:left;background:#999;border:1px solid #333;width:180px;height:100px}
.float2{float:left;width:200px;}
.clear{clear:both;height:0px;font-size:1px}

<div class="content">
    <div class="float1">浮动元素,默认设置是180px，我们在这里适当添加内容直到超过外面的div的高度</div>
    <div class="float1">内容固定部分(高度是100px)<br />
测试内容<br />
测试内容<br />
测试内容<br />
测试内容<br />
测试内容<br />
</div>
<div class=" clear "></div>
</div>

我们来看看效果：
当左边的内容小于右边时候：
以下是ie6、ie7和firefox（ff）下的预览情况：

接着我们加大左边的内容：
ie6下预览：一切ok。

然后看看ie7和firefox（ff）

如何解决这个问题呢？

解决办法：用!important声明和min-height
这两个属性ie7和ff都可以读到。唯有ie6识别不了。所以，以上样式的.float1可以这样修改：
.float1{float:left;background:#999;border:1px solid #333;width:180px;height:100px;min-height:100px;height:auto!important;}

为什么要用min-height呢？因为用了height:auto,将覆盖了前面的height:100px；如果不加这个属性，当内容小于100px高度时，在ie7和ff下都显示的高度都是左边当时的高度，各种小于100px的高度都有可能。而ie6是读不了height:auto;所以这个时候它显示的情况是100px；明白了吧。
如果还不清楚可以加入seo俱乐部qq交流群：5923309。（本文由稻草人提供。转载务必注明本站链接和作者。谢谢）