转载嵌套div中margin-top转移问题的解决办法
在这两个浏览器中，有两个嵌套关系的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>
在这两个浏览器中，有两个嵌套关系的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无效
解决办法：
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
相关推荐
今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下： html: 复制代码代码如下:<div class=”logo”></div> <div class=”login_text”> <div id=”error” class=”errorstyle”></div> </div> css: ...
今天小组一同学做网站时，遇到一个关于margin-top兼容问题：有两个div,其中div1嵌套div2,而在div2里面设置margin-top后，在IE8、ff和chrome下显示的效果竟然不是想要出现的结果，而在IE7下面效果正确。
以前需要边框长度比容器小一些时，我用div嵌套。后来发现伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和margin都不会很麻烦。 <div class=content-block> <div class=box-container> <div ...
通常情况下，大家见到的选项卡都是没有嵌套功能的，也就是说就是完成了一层切换效果，本章节分享一段代码实例，实现了选项卡的嵌套功能，也就是选项卡中嵌套有选项卡功能，也就能够容纳更多... margin-top:10px; mar
margin-top用法.html 属性margin-top用法。 margin实例.html 演示margin实例用法。 margin实例--设置层与层的距离.html 设置层与层的距离。 实例手把手--DIV+CSS结合.html 演示实例手把手--DIV+CSS结合...
*** 第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式 *** 优先级（一般情况） 由上到下，由外到内。优先级由低到高。 *** 后加载的优先级高 *** 格式 选择器名称 { 属性名：属性值；属性...
Appwrite文档 :memo: 官方的文档源代码。 :rocket: 贡献 克隆存储库 更新，添加或修复了当前文档 内容准备好后，提高PR 内容准则 ... div class =" ide margin-top-small " data-lang =" ruby " data-l
-MenuButton, LinkButton, Button, LinkButtonField的ConfirmTarget属性由字符串变为枚举类型，可以取三个枚举值Self, Parent, Top。 -Confirm.GetShowReference的最后一个参数target变为枚举类型。 -Alert....
必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ color:red !important; ...
-不绑定任何数据到Grid时，确保页面不会出错。 -修正了Grid列属性DataFormatString的一个bug,比如设置{0:yy-MM-dd HH:mm}时没有效果。 -修正下拉列表控件不能绑定DataTable的BUG(feedback:RedOcean)。 -增加...
第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素(不过最好别这样写，因为jQuery需要遍历所有的div元素，对于带id的元素，直接用$("#id"))。第四行代码得到context为上下文的table...