我的解决办法
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
时间: 2024-09-21 00:17:06