在这两个浏览器中，有两个嵌套关系的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. Kindeditor 编辑器POST提交的时候会出现符号被转换

    Kindeditor编辑器输入符号单引号,双引号,斜杠 都会被转义 解决办法 $date['content']=$this->textString($_POST['content']); pub ...

  2. Google 谷歌网页搜索, 学术搜索

    Google 谷歌网页搜索, 学术搜索 1. 网页搜索引擎-Google * https://letsgg.tk/ * https://google.kfd.me/ 谷歌搜索镜像:  http://d ...

  3. webapi输入验证过滤器ValidationActionFilter

    public class validationActionFilter:ActionFilterAttribute { public override void OnActionExecuting(S ...

  4. cmd /c和cmd /k 解释，附★CMD命令★ 大全

    cmd /c和cmd /k http://leaning.javaeye.com/blog/380810 java的Runtime.getRuntime().exec(commandStr)可以调用执 ...

  5. fedora配置网络

    网络配置包括3个部分: ipadd的配置 gateway profile dns profile 格式区别: 1和2的格式都是: CONFIG_ITEM = value; 3的格式是: nameser ...

  6. objective-c与c++的差异

    oc的编译指令为 clang -fobjc-arc -framework Foundation test.m -o test oc中,1表示YES,0表示NO.并不是非0值都是YES,这是因为BOOL ...

  7. 有关html5设计那些事，你真的考虑过前端的实现吗(最近别人经常问我这种问题，所以我就写一篇了，可能也有别人和我一样吐槽过)

    很久以前在安卓2.0系统刚刚的时候就对HTML5比较关注!因为我也是那个时候刚刚入行做前端的.那个时候最大的乐趣就是看着w3plus上面各种css3的效果,觉得哇,好牛逼原来可以这样做,然后3年过去了 ...

  8. JUnit之持续集成（CI，Continuous Integration）

    序,测试驱动开发告诉我们,要尽早测试,经常测试.如果我们进行一点小改动时,都把所有的单元测试.集成测试和功能测试执行一遍,这就会非常浪费时间.为了避免这一点,在开发期间我们只执行单元测试,那么集成测试 ...

  9. JS keycode 事件响应

    <script language="javascript"> function keyevent(){ if(event.keyCode==13) alert(&quo ...

  10. 利用百度语音API进行语音识别。

    由于项目需要,这几天都在试图利用百度语音API进行语音识别.但是识别到的都是“啊,哦”什么的,我就哭了. 这里我只是分享一下这个过程,错误感觉出现在Post语音数据那一块,可能是转换问题吧. API请 ...