有两个嵌套关系的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. CentOS 下部署 ASP.NET Core环境

    一.安装dotnet 1.下载运行环境 https://www.microsoft.com/net/download/linux 下载Runtime:https://go.microsoft.com/ ...

  2. QMap

    #include <QCoreApplication> #include<QMap> #include<QDebug> int main(int argc, cha ...

  3. CSS之元素选择器

    1.后代元素选择器 div p 以空格分隔,表示div的所有后代p元素 2.子元素选择器 div > p 以大于号分隔,表示div的直接子元素 3.相邻兄弟选择器 div  + p 选择紧接在d ...

  4. ExpandoObject动态类生成属性转json

    using System; using System.Collections; using System.Collections.Generic; using System.Collections.O ...

  5. myisam、innodb存储引擎比较

    MYSQL表类型(存储引擎) 1．概述 MySQL数据库其中一个特性是它的存储引擎是插件式的.用户可以根据应用需要选择存储引擎.Mysql默认支持多种存储引擎,以适用各种不同的应用需要.默认情况下,创 ...

  6. SQL Server 不清空数据，修改数据库字段、结构，阻止保存要求重新创建表的更改

    当数据库有数据修改数据库字段时,默认是阻止的! 工具---选项---设计器---阻止保存要求重新创建表的更改(取消钩)

  7. Apache本地配置多域名

    第一步:打开本地系统安装目录,进入目录C:\Windows\System32\drivers\etc找到一个叫hosts文件,用记事本打开,在文件结尾加入以下代码: 127.0.0.1 www.tes ...

  8. 使用hbuilder编辑器实现移动app打包

    作为一枚web前端来讲,需要了解的东西太多,需要学习的也太多了,那天因为公司需求,就研究了下移动网站打包成app的方法,这种东西好像是H5出来后就有推出的,因为性功能不行,就没怎么关注,但现在移动互联 ...

  9. JsonUtil工具类

    package comm; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Collec ...

  10. java快速学习

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Java是面向对象语言.这门语言其实相当年轻,于1995年才出现,由Sun公司出品 ...