firefox的margin-top无效问题解决办法
发布时间：2023-09-02 编辑：jiaochengji.com
教程集为您提供firefox的margin-top无效问题解决办法等资源，欢迎您收藏本站，我们将为您提供最新的firefox的margin-top无效问题解决办法资源
今天小涛碰到了firefox的margin-top无效的问题,这是ff的bug来的，方法也有很多一行代码就解决了，加入display:inline-block;就可以了
我的解决办法
firefox的margin-top无效的问题我们只要简单的加入display:inline-block;就可以解决了，
下面附一些实例
.box2增加float属性
2.box1与box2之间增加一层"<div style="clear:both;"></div>"
（二）子元素设置margin-top作用于父容器
| 代码如下 | 复制代码 |
| <div class="box" style="height:100px;background:red;">
<div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div>
</div> |
当给box2设置margin-top时，在FF下仅作用于父容器。
| 代码如下 | 复制代码 |
|
<title>Firefox下margin-top问题</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.box2{
margin-top:20px;
width:500px;
height:50px;
background:#000;
color:#fff;
}
-->
</style>
</head>
<body>
<div class="box" style="height:100px;background:red;">
<div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>
|
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
解决办法：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top
您可能感兴趣的文章：
