在这两个浏览器中，有两个嵌套关系的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. yourphp读取不到hits

    源代码 <YP:list name="Article" order="id desc" catid="37" limit=" ...

  2. 第一次使用Android Studio时你应该知道的一切配置

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  3. imageserver

    https://bitbucket.org/tamtam-nl/tamtam-nuget-imageserver/overview https://www.nuget.org/packages/Tam ...

  4. 在 docker中 运行 mono /jexus server 并部署asp.net mvc站点

    http://linuxdot.net/bbsfile-3988 1.  安装 docker:      // docker 1.7 新版 安装非常容易,理论上说,在主流的任意linux发行版上都可以 ...

  5. Exception Handling in ASP.NET Web API webapi异常处理

    原文:http://www.asp.net/web-api/overview/error-handling/exception-handling This article describes erro ...

  6. Why you shouldn't use Entity Framework with Transactions

    Links EntityFramework This is a .net ORM Mapper Framework from Microsoft to help you talking with yo ...

  7. servlet生命周期与工作原理

    →   Jsp的本质是Servlet,Servlet是服务器端的小程序,运行在服务器,用于处理及响应客户端的请求. Servlet和JSP的区别: servlet是特殊的Java类,必须继承HttpS ...

  8. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  9. java中如何将字符串数组转换成字符串（转）

    如果是 “字符串数组” 转 “字符串”,只能通过循环,没有其它方法 String[] str = {"abc", "bcd", "def"} ...

  10. H5 使用

    关闭页面 http://www.bcty365.com/content-146-3343-1.html 回退页面: plus.key.addEventListener('backbutton', fu ...