在这两个浏览器中，有两个嵌套关系的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="width:300px; height:100px">上部层</div>

<div style=" width:300px; height:300px;overflow:hidden "> <!--父层-->
     <div style="margin:50px; width:200px; height:200px"">子层</div>
</div>

</body>
</html>

原因：盒子没有获得 haslayout  造成 margin-top无效
 
解决办法：
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;

出处： http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html

嵌套div中margin-top转移问题的解决办法的更多相关文章

  1. HTML中div嵌套div的margin不起作用

    下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...

  2. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  3. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  4. access数据库select查询top时无效的解决办法

    access数据库select查询top时有时无效,原因就是在使用Order by时,且排序的条件中数据有重复的. 比如:select top 10 * from table1 order by cd ...

  5. IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法

    IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法 原文链接:http://www.cnblogs.com/200325074/p/3679316.html 今天刚安装好IIS8.5, 我 ...

  6. Excel在任务栏中只显示一个窗口的解决办法

     Excel在任务栏中只显示一个窗口的解决办法  以前朋友遇到过这个问题,这次自己又遇到了,习惯了以前的那种在任务栏中显示全部窗口,方便用Alt+Tab键进行切换． 如果同时打开许多Excel工作簿, ...

  7. 在ASP.net中的UpdatePanel，弹窗失败解决办法

    原文:在ASP.net中的UpdatePanel,弹窗失败解决办法 最开始我用: Response.Write("<script>alert('和哈呵呵呵呵呵呵!')</s ...

  8. Ubuntu中Android SDK Manager无法更新解决办法

    Ubuntu中Android SDK Manager无法更新解决办法http://hi.baidu.com/petercao2008/item/d7a64441f04668e81e19bc1a

  9. 工作总结 EntityFramework中出现DateTime2异常的完美解决办法

    EntityFramework中出现DateTime2异常的完美解决办法   今天在使用entityframework往数据库插入数据的时候,突然出现了一个数据类型转换异常的问题: System.Da ...

  10. 把myeclipse中的web项目导入eclipse中不能编程web项目的解决办法

    title: 把myeclipse中的web项目导入eclipse中不能编程web项目的解决办法 tags: grammar_cjkRuby: true --- 右键单击项目,properties-- ...

随机推荐

  1. live555在Raspberry Pi上的点播/直播

    1.live555在Raspberry Pi上的点播 live555MediaServer这个实例是个简单的服务器,支持多媒体点播,直接在Raspberry Pi上编译运行,或者通过交叉编译出ARM核 ...

  2. How to save milliseconds to DB in NHibernate

    We need to configure Timestamp in Mapping. eg. Map(x => x.ResponseDate).CustomType("Timestam ...

  3. linq group join

    本篇介绍Linq的Group和Join操作,继续使用<Linq 学习(3) 语法结构>中介绍的数据源. GroupGroup是进行分组操作,同SQL中的Group By类似.原型如下: p ...

  4. [转] Memcached参数设置 命令

    只是看到了..这些命令肯定是没问题的.. 笔者现在也还不会用..汗..先留着..找到怎么用了在回来修改.. memcached的基本设置: -p 监听的端口-l 连接的IP地址, 默认是本机-d st ...

  5. PHP数组处理函数的使用array_map（三）

    /*函数array_map()函数:多数组回调函数---将回调函数作用到给定数组的单元上 * 1.语法:array array_map ( callback callback, array arr1 ...

  6. android自定义控件(8)-利用onMeasure测量使图片拉伸永不变形,解决屏幕适配问题

    使用ImageView会遇到的问题 在Android应用中,都少不了图片的显示,ImageView,轮播图,ViewPager等等,很多都是来显示图片的,很多时候,我们都希望图片能够在宽度上填充父窗体 ...

  7. android控件库(1)-带删除功能的EditText

    DJEditText.java /** * Created by xp.chen on 2016/11/25. */ public class DJEditText extends AppCompat ...

  8. 【8-17】c++学习笔记01

    控制台程序不自动退出方法: system("pause"); getchar() 使用执行 ctrl+F5,开始调试 F5会出现闪退 动态内存分配 //construct c st ...

  9. Maven Eclipse (m2e) SCM connector for subclipse 1.10 (svn 1.8) 无法检测

    用新东西总是会有一些风险,尤其是相互的依赖和版本问题. 为了体验最新Eclipse Mars,Version: Mars Milestone 1 (4.5.0M1),Eclipse安装之后需要安装一些 ...

  10. MessageFormat用法

    MessageFormat用来格式化一个消息,通常是一个字符串,比如: String str = "I'm not a {0}, age is {1,number,short}", ...