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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

Javascript对象的方法赋值

Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中,又犯了一个低级错误。 <!DOC...

20890
来自专栏liulun

学习WPF——初识依赖项属性

入门 首先创建一个依赖项属性 ? 然后绑定父容器的DataContext到这个依赖项的实例 ? 接着绑定子元素的属性到依赖项属性(注意Button的Conten...

20670
来自专栏木子昭的博客

ES6常用语法糖(附Babel配置使用方法)

获取数据: 解构赋值 ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

31780
来自专栏柠檬先生

Angularjs基础(七)

AngularJS表单     AngularJS表单时输入控件的集合 HTML控件     一下HTML input 元素被称为HTML 控件:   ...

22670
来自专栏从零开始的linux

shell变量

bash的重要特性:变量 bash变量类别: 本地变量:只对当前shell进程有效的变量;对其它shell进程无效,包当...

33360
来自专栏LIN_ZONE

写jquery插件(转载)

如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘...

13330
来自专栏java架构师

C# 多线程

 Thread类的使用: 初始化: Thread th1 = new Thread(function1); Thread th2 = new Thread(ne...

33460
来自专栏前端杂货铺

jQuery的事件模型

前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓...

36580
来自专栏黄Java的地盘

eventEmitter3源码分析与学习

事件监听在前端的开发过程中是一个很常见的情况。DOM上的事件监听方式,让我们看到了通过事件的方式来进行具体的业务逻辑的处理的便捷。

16010
来自专栏Java3y

DOM编程

什么是DOM? DOM(Document Object Model)文档对象模型,是语言和平台的中立接口。。 允许程序和脚本动态地访问和更新文档的内容。 为什么...

33970

扫码关注云+社区

领取腾讯云代金券