独角兽企业重金招聘Python工程师标准>>>
虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的'zoom:1'触发了hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。
在IE6IE7IE8(Q)中,容器div的'zoom:1'触发了hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的'margin-bottom'消失;
在其他浏览器中,容器的'overflow:hidden'创建了新的BlockFormattingContext,同样,其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的margin均正常。
例子:第一个div子元素设置了底部的margin值,在清除浮动之后无效
<!doctypehtml><html><head><metacharset="UTF-8"><title>浮动元素的影响</title><style>*{margin:0;padding:0;}.con-float-box{width:600px;border:1pxsolid#f00;}.con-float-boxdiv{float:left;width:198px;height:98px;margin:20px0;border:1pxsolid#00f;}.box-pos{width:600px;height:100px;margin-top:10px;border:1pxsolid#000;background:#ccf;}.clearfix:before,.clearfix:after{content:"\200B";display:block;height:0;overflow:hidden;}.clearfix:after{clear:both;}</style></head><body><divclass='con-float-boxclearfix'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div><divclass='box-pos'>为第一个div设置了清除浮动的类clearfix,进行了相应的处理,此时,在谷歌浏览器当中正常,但是在IE6,依旧不正常,第7和第8个块底部的margin没有生效。</div></body></html>
解决方案
为容器显式地设置高度。若容器高度不定,则要避免在触发了hasLayout的容器内的浮动子元素上设置'margin-bottom'特性,可以通过为容器设置'padding-bottom'达到相似的效果。
只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的margin-bottom值,这三个条件中任意一项,均可解决此问题。
以上就是今天E良师益友网对定义了浮动元素后margin-bottom失效的解决办法详解了。