有两个嵌套关系的div，如果外层div的父元素padding值为0，

那么内层div的margin-top或者margin-bottom的值会“转移”给外层div，使父元素产生上外边距。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <div style="background-color:#FF0000;width:300px; height:100px">上部层</div>

     <div style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->

     <div style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</div>

 </div>

 </body>

 </html>

原因：盒子没有获得 haslayout 造成 margin-top无效     （haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。）

解决办法：

1、在父层div加上：overflow:hidden；

2、把margin-top外边距改成padding-top内边距 ；

3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。

父层div加： padding-top: 1px;

4、让父元素生成一个 block formating context ，以下属性可以实现

* float: left/right

* position: absolute

* display: inline-block/table-cell(或其他 table 类型)

* overflow: hidden/auto

父层div加：position: absolute;

div嵌套导致子区域margin-top失效不起作用的解决方法的更多相关文章

  1. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  2. 给子元素设置margin-top无效果的一种解决方法

    在写一个登陆界面的时候,设置登录按钮的margin-top时出了问题 先是这么写的 <div style="margin-top:30px"> <a style= ...

  3. IE中float元素如果同时设置了margin值，此时margin的值会变为双倍的解决方法

    IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.

  4. 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法

    一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...

  5. div不设置高度背景颜色或外边框不能显示的解决方法

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题. 大体结构<div class="oute ...

  6. selenium webdriver使用click一直失效问题的几种解决方法

    想要爬取动态网页,很莫名的click失效.被这个问题困扰了很久,基本上把网上提到的所有方法试遍了,最终终于有个方法成功了,在这里总结一下. 这是我想要点击的网页,初始时实在0.5km上,它的class ...

  7. jeecms子栏目或者文章页导航父栏目选中解决方法

    jeecms在子栏目或者文章页导航父栏目选中,看例子 <div class="nav"> <ul> [@cms_channel_list ] <li ...

  8. jquery submit ie6下失效的原因分析及解决方法

    ie6中, $('a.btn').click(function(){ form.submit(); }) 点击失效: 分析: 微软低版本浏览器会先执行link标签的自身事件也就是href事件,这样就中 ...

  9. 关于Cocos2d-x中掉帧导致游戏一卡一卡的网上一些的解决方法

    方法1 掉帧主要是setpostion引起的  因为每一帧每一个精灵都要set一次虽然不知道为什么会这样但是if(poX<1000&&pox>-100){     xx-& ...

随机推荐

  1. solr5.2 mysql 增量索引

    前提:数据库里数据进行增删改操作时,相应的solr需要修改或者新建索引,之前从数据库中导入数据并创建索引的操作是全量创建,如果本身数据库数据量非常大,就需要增量创建索引 1./usr/local/sr ...

  2. shell (check return of each line)and sudoer

    shell result from cmdline echo $? if 0 then success ;else failure (shell 执行每部返回值,rm -rf 错误,打包不能覆盖) 解 ...

  3. UNIX常用命令

    以下只说明各常用指令的基本用法, 若需详细说明, 请用 man 去读详细的 manual. 1．关於档案/目录处理的命令 ls--列目录 这是最基本的档案指令. ls 的意义为 "list& ...

  4. 在ubuntu上建立多svn版本库

    http://lucane.iteye.com/blog/857486 mkdir ~/dev/repository svnadmin create ~/dev/repository/a svnadm ...

  5. Python学习笔记（一）python基础与函数

    1.python基础 1.1输入与输出 输出 用print加上字符串,就可以打印指定的文字或数字 >>> print 'hello, world' hello, world > ...

  6. kdiff3的主窗口说明 Base Local Remote 分别代表什么分支

  7. express 的 app.get和app.use

    1.若调用app.get()时只有一个参数,则认为是取设置值,否则认为是注册路由 2.所有被 app.use() 接收的 handle 会被放到一个 stack 里边 app.get() 执行的时候会 ...

  8. mongo3.2

    arbiter配置文件 processManagement: fork: true net: bindIp: 172.16.10.1,127.0.0.1 port: storage: dbPath: ...

  9. sql存储过程异常捕获并输出例子还有不输出过程里面判断异常 例子

    编程的异常处理很重要,当然Sql语句中存储过程的异常处理也很重要,明确的异常提示能够快速的找到问题的根源,节省很多时间. 下面,我就以一个插入数据为例来说明Sql Server中的存储过程怎么捕获异常 ...

  10. js的一些实用的小技巧

    1.移动端自适应: 移动端的编写首先需要在header写入以下内容来表示页面是以不缩放的形式展示的: <meta name="viewport" content=" ...