关于内层DIV设置margin-top不起作用的解决方案

昨天晚上,在写上一篇冒泡事件的时候,遇到了,内层div与外层div之间设置了margin-top,无效,决定好好的研究解决一下。

<div>上部层</div>

<div> <!--父层-->
     <div style="margin-top:200px;">子层</div>
</div>

理想中的效果是父层和上部层贴边显示,子层距离父层顶部有200px的距离,在ie中正常,但是在ff中却出现问题,子层和父层贴边了,而父层和上部层却间隔了200px。

百思不得其解,求助google,得到如下的一句:

当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。

也就是说因为子层是父层的第一个非空子元素,所以使用margin-top会发生这个错误。

解决的办法有两个:

1、使用浮动来解决,即将子层代码改为:<div style="margin-top:200px;float:left";>子层</div>

2、使用padding-top来解决,即:

<div style="padding-top:200px;">
    <div>子层</div>
</div>

(二)

常常可以碰到这样一个问题,就是外层DIV设置了高与宽,内层DIV如果设置maring-top不起作用(FIREFOX和IE8中测试),原因大致是内层div没有获得布局。如下面的代码:

<style>

.aDiv {background:red; width:300px; height:300px; }
.bDiv {background:green; position:relative; width:100px; height:20px; margin-top:10px;}
.cDiv {background:black; position:relative; width:100px; height:20px;}
</style>

<div class="aDiv">
<div class="bDiv"></div>
<div class="cDiv"></div>
</div>

测试发现,bDiv的margin-top不起作用,仍是0px的显示效果。如果在firefox中用firebug查看,可以看到margin-top是有值的,为10px;解决问题如下:

1、把margin-top改成padding-top,不过,前提是内层的Div没有设置边框
2、给外层的Div加padding-top
3、给外层DIV加:

A、float: left或right

B、position: absolute

C、display: inline-block或table-cell或其他 table 类型

D、overflow: hidden或auto

<style>

.a {background:red; width:300px; height:300px; float:left; }
.b {background:green; position:relative; width:100px; height:20px; margin:10px;}
.c {background:black; position:relative; width:100px; height:20px;}

.clear{ clear:both;}
</style>

<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>

<div class="clear"></div>



内层有一个input和一个div,我想让div居中,我外层div的css如下,background-color rgba(0, 0, 0, 0) border-bottom-color rgb(229, 229, 229) border-bottom-left-radius 10px border-bottom-right-radius 10px border-bottom-style solid border-bottom-width 1px border-image-outset 0 border-image-repeat stretch border-image-slice 100% border-image-source none border-image-width 1 border-left-color rgb(229, 229, 229) border-left-style solid border-left-width 1px border-right-color rgb(229, 229, 229) border-right-style solid border-right-width 1px border-top-color rgb(229, 229, 229) border-top-left-radius 10px border-top-right-radius 10px border-top-style solid border-top-width 1px box-sizing border-box color rgb(95, 95, 95) cursor pointer display flex font-family "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif font-feature-settings normal font-kerning auto font-optical-sizing auto font-size 14px font-stretch 100% font-style normal font-variant-alternates normal font-variant-caps normal font-variant-east-asian normal font-variant-ligatures normal font-variant-numeric normal font-variant-position normal font-variation-settings normal font-weight 400 height 70px left 0px line-height 28px margin-bottom 0px margin-left 0px margin-right 0px margin-top 0px padding-bottom 12px padding-left 12px padding-right 12px padding-top 12px position relative text-wrap wrap top 0px unicode-bidi isolate user-select none vertical-align middle white-space-collapse collapse width 300px z-index 10 -webkit-tap-highlight-color rgba(0, 0, 0, 0)
最新发布
03-26
``` <div style="width: 100%"> <el-form style="background: #fff;width: 100%" :model="receiptAddr" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="寄件人" style="margin-left: 50px;margin-top: 20px;width: 100% "> <el-select v-model="sendAddr.sender_address" @change="sendaddrChange" placeholder="请选择寄件人" style="flex:1;width: 100%"> <el-option :label="'请选择寄件人'" :value="0"></el-option> <el-option v-for="(item, index) in getShopAddr.addr" :key="index" :label="item" :value="index"></el-option> </el-select> </el-form-item> <div></div> <el-form-item label="姓名" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px;width: 100%"> <el-input v-model="sendAddr.sender_name" placeholder="姓名" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="联系方式" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_mobile" placeholder="联系方式" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="省市区" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_pca" placeholder="省市区" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="详细地址" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_address" placeholder="详细地址" clearable style="flex:1" disabled /> </el-form-item> <div></div> </el-form> </div>```给宽度100%没有作用
03-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值