在最新的css标准中,浮动元素float是不影响盒层结构布局的,最多也就影响到排列问题,这就出现了一个现象就是父容器不会自适应所包含的 float的高度,比如A包含B,B的高度是h,按照常规的思路,A的高度至少是大于h的,结果由于B是float元素,所以A的高度最终将忽略h,在 IE中这个bug好像叫做:Peekaboo bug。

以前就曾经出现过这样的问题,当时只是在IE中得到解决,使用的css代码是:

程序代码 程序代码
height: 100%; /*Fix for IE Peekaboo Bug */

或者

程序代码 程序代码
height: 1%; /*Fix for IE Peekaboo Bug */

不过在firefox下却依然存在问题,之前我自己采用的方法是在增加一个绝对的高度定位来弥补firefox中的现实问题,想到如果不能自适应的话,以后如果层内的内容增多的话我依旧要手动去改动父容器的高度,实在是有点不合理,最后查了些资料,找到一个不错的方法,在最新版的IE6和 firefox1.5.0.6下测试通过,其它版本应该也差不多能通过,由于不方便测试,只好等到回头找些旧的系统详细的测试下。上面的代码做如下的修改即可:
[code]overflow: auto; /*Fix for Firefox Peekaboo Bug */
_height: 1%; /*Fix for IE Peekaboo Bug */[/code]

http://blog.dngz.net/129.htm

我想发表对此文的评论 ...(没有弹出错误信息则说明评论成功,需要等待审核.)