关于内层DIV设置margin-top不起作用的解决方案
from:http://www.cnblogs.com/huangyong8585/archive/2013/05/21/3090779.html
(一)
近日在做另外一个站点的时候,又遇到这个问题,决定好好的研究解决一下。
代码如下:
<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>
注意:后面要加一个清除浮动。
关于内层DIV设置margin-top不起作用的解决方案的更多相关文章
- CSS 之 内层div填充margin,外层div的背景色不会覆盖该margin
外层元素(如div)中只有一个非空子元素,此时margin是被折叠了.两者之间取最大的margin值,表现在外层父元素上,而不是内层子元素. 注意: (1)只有垂直方向上才会出现此现象,水平方向不会出 ...
- HTML a标签如何设置margin属性(转)
很多同学发现对DIV有效的许多CSS属性对<a>或<p>标签都无效,好比说 <div style="margin-top:5px;"></ ...
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
- 让内层Div将外层Div撑开
在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...
- 第4天:JS入门-给div设置宽高背景色
今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...
- 子DIV设置margin-top影响父DIV位置的解决办法
父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...
- Android如何在java代码中设置margin
习惯了直接在xml里设置margin(距离上下左右都是10dip),如: <ImageView android:layout_margin="10dip" android:s ...
- 转--Android如何在java代码中设置margin
======== 3 在Java代码里设置button的margin(外边距)? 1.获取按钮的LayoutParams LinearLayout.LayoutParams layoutParams ...
随机推荐
- javascript 模仿回车键事件
<script> $(function(){ var _login = function (){ var _name = $('#name'); var _password = $('#p ...
- Nohttp请求图片的两种简答的方式:普通请求以及缓存请求
开局声明:这是基于nohttp1.0.4-include-source.jar版本写的教程 由于nohttp功能强悍,因此需要多种权限,仅仅一个联网的权限是不够的,如果只给了Internet的权限,去 ...
- Android 使用monkey自动测试
很简单的一个monkey使用流程: 首先创建一个monkey脚本test.txt,例如一个简单的反复测试拍照功能的脚本: # Start of Script type= user count= 49 ...
- oracle生成随机数
UPDATE busi_chance_info t SET t.exp_amount = (SELECT floor(dbms_random.value(1, 10000000)) ...
- iOS-OC-基础-NSNumber常用方法
/*===========================NSNumber数值对象=========================*/ // 将基本数据类型保存为NSNumber 对象类型 NSNu ...
- UITextView(文本视图) 学习之初体验
UITextView文本视图相比与UITextField直观的区别就是UITextView可以输入多行文字并且可以滚动显示浏览全文.常见UITextView使用在APP的软件简介.内容详情显示.小说阅 ...
- ActiveMQ持久化消息(转)
ActiveMQ的另一个问题就是只要是软件就有可能挂掉,挂掉不可怕,怕的是挂掉之后把信息给丢了,所以本节分析一下几种持久化方式: 一.持久化为文件 ActiveMQ默认就支持这种方式,只要在发消息时设 ...
- 关于LayoutParams
每一个布局均有一个叫LayoutParams的内部类,如: LinearLayout.LayoutParams RelativeLayout.LayoutParams AbsoluteLayout ...
- sql每五秒插入一条数据 一次插入N条数据
1建立数据表 create table projectManage ( ID int identity primary key not null, projectName )not null, man ...
- MVC Controller 与 View 传值
Controller 到 View 1 强类型 控制器 // GET: /Test/ public ActionResult Index() { DateTime date = DateTime.No ...