在这两个浏览器中，有两个嵌套关系的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. js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

    标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...

  2. HBase命令(二) -- 表操作

    创建表 hbase shell> create 'mytable','col1','col2' //建表语句 create '表名','列簇名','列簇名','列簇名' hbase shell& ...

  3. Mongodb副本集搭建经验

    一.环境配置经验 1.一般安装的副本集的时候,主实例可以有数据库和用户:从实例不能.仲裁机不能有任何数据库包括用户 2.搭建副本集的时候Host使用外网IP,否则使用Mongodb VUE 1.6.9 ...

  4. XSHELL下直接下载文件到本地(Windows)

    xshell很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz 首先你的Ubuntu需要安装rz.sz(如果没有安装请执行以下命令,安装完的请跳过. ...

  5. 国内SEO如何过滤掉不良网络信息

    对于站长们来说,首要任务就是和搜索引擎战斗,面对搜索引擎算法的不断更新,站长们也更加头疼.站长们都觉得,搜索引擎才是网站优化的"统治者",和谷歌优化相比,中国的SEO优化要复杂的多 ...

  6. log4net的基本配置及用法

    [1].[代码] [C#]代码 跳至 [1] [2] ? 1 2 using System.Reflection;  //使用反射 static private ILog log = log4net. ...

  7. 绿书模拟day10 单词前缀

    [题目描述]一组单词是安全的,当且仅当不存在一个单词是另一个单词的前缀,这样才能保证数据不容易被误解,现在你手上有一个单词集合s,你需要计算有多少个自己是安全的.注意空集永远是安全的.[输入格式]第一 ...

  8. CentOS的SSH,Putty配置说明

    基本资源: CentOS5.5 (32位) , Mysql6.0 ,Putty ,SSH   Step: 1.VMWare中装好CentOS    A. 可能存在ifconfig等命令无法正常识别) ...

  9. VS上利用C#实现一个简单的串口程序记录

    一.背景 工作上需要利用串口往下位机写入数据,VC太老,正好借此机会来熟悉一直很想接触的VS之C#. 感谢Tony托尼哥的串口通信代码,感谢梦真的C#的技术支持. 二.正文 1.项目架构:(以我现有的 ...

  10. Android高仿微信（一）——如何消除启动时的白屏

    默认情况下,APP启动时会先把屏幕刷成白色,然后才绘制第一个Activity中的View,这两个步骤之间的延迟会造成启动后先看到白屏(时间大概为1秒左右).时间不长,但是我们也看到,一般的APP时不存 ...