有两个嵌套关系的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. oracle 常用函数【转】

    常用Oracle函数 SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数; SQL> select ascii('A') A,ascii('a') a,ascii('0') z ...

  2. 支付宝地铁SDK使用失败记录

    使用PHP版的SDK,没处理好,发现有个test/TestImage.php的测试文件,开始改,发现状态码$request -> getCode()一直为0,一路调试上去,发现是getConte ...

  3. MySQL 插入数据 通过命令提示窗口插入数据

    MySQL 表中使用 INSERT INTO SQL语句来插入数据. 你可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 语法 以下为向MySQL数据表插 ...

  4. [原创]快速指定SQLDeveloper所使用JDK的方法

    就众多的免费SQL开发工具来讲,Oracle出品的SQLDeveloper 还是一个很不错的选择. 看到网上不少的帖子讨论SQL Developer 启动的时候报告找不到Java Home(或JDK) ...

  5. web前端开发和后端开发有什么区别？

    web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...

  6. Page in/Page out/Page fault

    Paging refers to writing portions, termed pages, of a process' memory to disk. Swapping, strictly sp ...

  7. Android 自定义spinner下拉框实现

    一:前言本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去网 ...

  8. ue4 ios

    project settings package 可以指定非APK打包,确定资源是否发布 可以指定content下某个目录所有文件(非.uassert)都打包 ios环境下fopen打开文件需要指定路 ...

  9. R12.2 URL Validation failed. The error could have been caused through the use of the browser's navigation buttons

    EBS升级到R12.2.4后,进入系统操作老是报以下错误: 通过谷歌发现有人遇到相同的问题,并提供了解决方案. 原文地址:http://onlineappsdbaoracle.blogspot.com ...

  10. github设置只识别指定类型的文件

    原文 # 忽略所有文件 * # 不忽略目录 !*/ # 不忽略文件.gitignore和*.foo !.gitignore !*.foo