浮动元素margin-bottom失效 — IE6盒模型

Posted mhxy13867806343

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动元素margin-bottom失效 — IE6盒模型相关的知识,希望对你有一定的参考价值。

  虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 ‘zoom:1‘ 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中

   在 IE6 IE7 IE8(Q)中,容器div的 ‘zoom:1‘ 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 ‘margin-bottom‘ 消失;

 在其他浏览器中,容器的 ‘overflow:hidden‘ 创建了新的 Block Formatting Context ,同样,其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的 margin 均正常。

 

  例子:第一个div子元素设置了底部的margin值,在清除浮动之后无效

技术分享图片
 1 <!doctype html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta charset="UTF-8">
 8 
 9 <title>浮动元素的影响-独行冰海</title>
10 
11 <style>
12 
13 *{margin: 0;padding: 0;}
14 
15 .con-float-box{
16 
17 width: 600px;
18 
19 border: 1px solid #f00;
20 
21 }
22 
23 .con-float-box div{
24 
25 float: left;
26 
27 width: 198px;
28 
29 height: 98px;
30 
31 margin: 20px 0;
32 
33 border: 1px solid #00f;
34 
35 }
36 
37 .box-pos{
38 
39 width: 600px;
40 
41 height: 100px;
42 
43 margin-top: 10px;
44 
45 border: 1px solid #000;
46 
47 background: #ccf;
48 
49 }
50 
51 .clearfix:before,.clearfix:after {
52 
53 content: "\\200B";
54 
55 display: block;
56 
57 height: 0;
58 
59 overflow: hidden;
60 
61 }
62 
63 .clearfix:after {clear: both;}
64 
65 </style>
66 
67 </head>
68 
69 <body>
70 
71 <div class=‘con-float-box clearfix‘>
72 
73 <div>1</div>
74 
75 <div>2</div>
76 
77 <div>3</div>
78 
79 <div>4</div>
80 
81 <div>5</div>
82 
83 <div>6</div>
84 
85 <div>7</div>
86 
87 <div>8</div>
88 
89 </div>
90 
91 <div class=‘box-pos‘>为第一个div设置了清除浮动的类clearfix,进行了相应的处理,此时,在谷歌浏览器当中正常,但是在IE6,依旧不正常,第7和第8个块底部的margin没有生效。</div>
92 
93 </body>
94 
95 </html>
View Code

技术分享图片

解决方案

  为容器显式地设置高度。若容器高度不定,则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 ‘margin-bottom‘ 特性,可以通过为容器设置 ‘padding-bottom‘ 达到相似的效果。

   只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值,这三个条件中任意一项,均可解决此问题。

 

以上是关于浮动元素margin-bottom失效 — IE6盒模型的主要内容,如果未能解决你的问题,请参考以下文章

内外边距浮动布局相关

清除浮动的一些方法

Float浮动

浮动问题(IE6最小高度问题双边距问题以及清理图片间隙)

兼容性—IE6下浮动元素和定位元素并列,定位元素消失

IE6+以上清除浮动普遍方法总结