修复IE6,7--DIV浮动情况下margin-bottom失效

最新推荐文章于 2021-08-03 21:48:32 发布

Hmmmmmmmm

最新推荐文章于 2021-08-03 21:48:32 发布

阅读量430

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/hmmmmmmmm/article/details/54412325

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<style>
.clear:after{ content: ''; display: block; clear: both;}
.clear{ zoom: 1;}
.box1{ float: left; width: 150px; height: 150px; background: red; margin-bottom: 10px;}
.box2{ width: 50px; height: 50px; background: orange;}
</style>


<body>
<div class="contain clear">
    <div class="box1"></div>
</div>

<div class="box2"></div>
</body>

上面代码在除IE6,7浏览器下显示都是正常的。

IE6,7下margin-bottom失效，如下图
这里写图片描述

解决方案：
去除box1的margin-bottom:10px,给box1的父元素contain添加padding-bottom:10px

<style>
.clear:after{ content: ''; display: block; clear: both;}
.clear{ zoom: 1;}
.contain{ padding-bottom:10px;}
.box1{ float: left; width: 150px; height: 150px; background: red; /*margin-bottom: 10px;*/}
.box2{ width: 50px; height: 50px; background: orange;}
</style>


<body>
<div class="contain clear">
    <div class="box1"></div>
</div>

<div class="box2"></div>
</body>