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

HTML5学堂:虽然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值,在清除浮动之后无效

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动元素的影响-独行冰海</title>
<style>
*{margin: 0;padding: 0;}
.con-float-box{
width: 600px;
border: 1px solid #f00;
}
.con-float-box div{
float: left;
width: 198px;
height: 98px;
margin: 20px 0;
border: 1px solid #00f;
}
.box-pos{
width: 600px;
height: 100px;
margin-top: 10px;
border: 1px solid #000;
background: #ccf;
}
.clearfix:before,.clearfix:after {
content: "\200B";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
</style>
</head>
<body>
<div class='con-float-box clearfix'>
<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>
<div class='box-pos'>为第一个div设置了清除浮动的类clearfix,进行了相应的处理,此时,在谷歌浏览器当中正常,但是在IE6,依旧不正常,第7和第8个块底部的margin没有生效。</div>
</body>
</html>

解决方案

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

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-10

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

使用延迟的FileSystemWatcher来避免重复触发事件

  程序里需要监视某个目录下的文件变化情况: 一旦目录中出现新文件或者旧的文件被覆盖,程序需要读取文件内容并进行处理;但在实际处理中发现当一个文件产生变化时,C...

862
来自专栏互联网开发者交流社区

STC-单片机控制系统

1103
来自专栏hbbliyong

socket 通信 多线程调用窗体(委托)的几个知识点,记录在案,以备查阅

1.socket 通信传输汉字的方法:Encoding.GetEncoding("GB2312").GetString(Receivebyte) 发送接收都这样...

2737
来自专栏王磊的博客

MySQL数据库工具类之——DataTable批量加入MySQL数据库(Net版)

MySQL数据库工具类之——DataTable批量加入数据库(Net版),MySqlDbHelper通用类希望能对大家有用,代码如下: using MySql....

3619
来自专栏Golang语言社区

GO语言 TCP传输实例

package main import ( "net" "fmt" ) var ( maxRead = 1100 msgStop = []byt...

3396
来自专栏张善友的专栏

通过SmtpClient发送Exchange会议邮件

看到C#中调用Outlook API 发起会议 ,这个完全可以用SMTP方式实现的,下面我的项目中使用的代码: 对于.NET而言,从2.0开始,发邮件已经是一件...

1929
来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 6 SWT 复杂控件使用以及布局

前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭...

2349
来自专栏田超学前端

【微信小程序】c# 实现获取openid、session_key 服务端

4830
来自专栏james大数据架构

CSS好看的按钮

好看的按钮 <style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDE...

1997
来自专栏张善友的专栏

弹出式模态窗体选择文本控件

2006年就要到来了,最近比较忙,很少更新blog,今天发一个模态窗体选择文本控件辞旧迎新.新年在发几个asp.net2.0 webPart控件同各位分享: ...

1907

扫码关注云+社区