IE中的BUG之margin-bottom失效

---

CSS #ie #bug2012-06-29 13:31

---

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;}

---

相关文章

• 超链接a标签去掉虚线框/虚线/去除虚线框 2012/06/14
• css非标准的ime-mode属性 2012/05/19
• 写css伪类时冒号前或后多个空格导致该规则失效 2012/05/19
• Div+CSS布局技巧 2012/04/28
• 常用的CSS知识 2012/04/26
• DIV+CSS网页布局常用的方法 2012/04/26
• 浏览器Firefox与IE在CSS样式表中的差异 2012/04/26
• 网页中用CSS样式表隐藏文字的方法 2012/04/26
• css3径向渐变(圆形渐变) 参数用法 2012/04/26
• CSS Hack 小总结 2012/04/26