之路

先说说这个经典的bug：在IE6下，如果父元素的宽度为奇数，子元素position:absolute right:0，则子元素离父元素右边实际为1px。在IE6下，如果父元素的高度为奇数，子元素position:absolute bottom:0，则子元素离父元素下边实际为1px。

补充：经过测试，在IE6下，如果父元素的宽度为奇数，子元素position:absolute right:xpx，则子元素离父元素右边实际为(x+1)px

在IE6下，如果父元素的高度为奇数，子元素position:absolute bottom:ypx，则子元素离父元素下边实际为(y+1)px

bug截图如下：

查看此bug

之路 前端开发

这个问题和以往的不同，问题只存在于firefox中，让人颇为“兴奋”。问题是这样的：当一个元素X内部有浮动元素并且自身使用了“万能清除浮动方法”，其下面的元素Y如果有margin-top值，则会在X元素上方产生一个与Y元素margin-top值相同高度的空白区域，Y元素margin-top值改变，空白区域的高度随之改变。此问题截图如下：查看此bug的demo

在其它浏览器（IE6/IE7/IE8/google chrome/opera/safari）中表现正常，截图为：

主要的结构为：

<div class="wrap">
    <div class="head clear_float">
        <div style="float:left;">之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)</div>
        <div style="float:right;">之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)</div>
    </div>
    <div class="box">之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)</div>
</div>

主要的样式为：

.clear_float:after{
                    display:block;
                    visibility:hidden;
                    height:0;
                    clear:both;
                    content:"";
                   }
.clear_float{display:block; zoom:1;}
.wrap{width:960px; margin:0 auto auto auto;}
.head{width:960px; margin-left:auto; margin-right:auto; background-color:#FF0000;}
.box{width:960px; margin:20px auto 4px auto; background-color:#003300; padding:0 0 10px 0;}

之所以说这个问题和清除浮动的方法有关，是因为如果X元素里面没有浮动元素，当然X元素就没有必要使用清除浮动了，这种情况下在firefox里面是没有本文所说的这个问题，所有浏览器下解析一致。理由2是经过测试，如果给清除浮动的class里面的content加“.”，就能解决这个问题。

经过测试，此问题的解决方法如下：

方法1：给X元素（本文中指class为head的元素）padding-top或者padding-bottom值

方法2：给X元素（本文中指class为head的元素）height值

方法3：给清除浮动的class的content加“.”

方法4：给X元素（本文中指class为head的元素）加overflow:hidden

方法5：给X元素（本文中指class为head的元素）上边框或下边框值

查看问题解决后的demo

之路 前端开发