CSS: IE中的BUG之margin-bottom失效

1. 出现条件

元素被浮动, 且其后没有其他元素,元素的margin-bottom不为0或auto.

2. 症状

为元素指定的margin-bottom无效, 就像margin-bottom为0一样.

3. 受影响的浏览器

IE6, IE7

4. 原因

暂不知道

5. 解决方法

a. 取消元素的margin-bottom, 改为指定父元素的padding-bottom(推荐);

b. 在元素之后添加一个<br />, 为其指定如下样式(不推荐, 放在此处, 了解一下):

elem{clear:both;}

6. example

/* 使用是第1种方法 */

xhtml:

<div id="box">

<p>example 1</p>

<p>example 2</p>

</div>

css:

#box {width: 210px;overflow: hidden;border: 1px solid green;margin: 10px auto 0;padding-bottom:10px;}

#box p {display: inline; float: left;width: 50px;border: 1px solid red;margin: 10px 5px 0;}

 

/* 使用是第2种方法 */

xhtml:

<div id="box">

<p>example 1</p>

<p>example 2</p>

<br />

</div>

#box {width: 210px;overflow: hidden;border: 1px solid green;margin: 10px auto 0;}

#box p {display: inline; float: left;width: 50px;border: 1px solid red;margin: 10px 5px;}?

#box br {clear:both;}