有两个嵌套关系的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. Ant 学习及常用任务

    安装与配置 下载地址:http://ant.apache.org/bindownload.cgi,解压. 添加系统环境变量: ANT_HOME,该变量指向Ant解压后的根目录. PATH,追加path ...

  2. Cookie和Session的区别详解

    本文引用自:http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一 ...

  3. Scala的函数，高阶函数，隐式转换

    1.介绍 2.函数值复制给变量 3.案例 在前面的博客中,可以看到这个案例,关于函数的讲解的位置,缺省. 4.简单的匿名函数 5.将函数做为参数传递给另一个函数 6.函数作为输出值 7.类型推断 8. ...

  4. MYSQL提权总结

    最近在测试一个项目,遇到了MYSQL数据库,想尽办法提权,最终都没有成功,很是郁闷,可能是自己很久没有研究过提权导致的吧,总结一下MYSQL提权的各种姿势吧,权当复习了.关于mysql提权的方法也就那 ...

  5. LeetCode Total Hamming Distance

    原题链接在这里:https://leetcode.com/problems/total-hamming-distance/ 题目: The Hamming distance between two i ...

  6. LeetCode Logger Rate Limiter

    原题链接在这里:https://leetcode.com/problems/logger-rate-limiter/ 题目: Design a logger system that receive s ...

  7. CentOS下使用Postfix + Dovecot + Dnsmasq搭建极简局域网邮件系统

    背景 开发环境为局域网,工作内容需要经常查看邮件文件(*.eml),可恶的Foxmail必须验证账户才能进入主界面,才能打开eml文件查看. 无奈搭一个局域网内的邮件系统吧.极简搭建,仅用于通过Fox ...

  8. Java语言程序设计(基础篇) 第七章 一维数组

    第七章 一维数组 7.2 数组的基础知识 1.一旦数组被创建,它的大小是固定的.使用一个数组引用变量,通过下标来访问数组中的元素. 2.数组是用来存储数据的集合,但是,通常我们会发现把数组看作一个存储 ...

  9. magento 安装

    magento 安装其实很简单. 第一步,打开,你下载好的程序,找到php.ini.simple,根据这里面的的要求,来修改,你本地或服务器 php.ini的配置. 第二步,开始安装了(注意,先在你的 ...

  10. 用于 Linux 平台的 Java

    切换到所需的安装目录.键入:cd directory_path_name例如,要将软件安装到 /usr/java/ 目录中,请键入:cd /usr/java/ 将 .tar.gz 档案二进制文件移到当 ...