<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外边距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>
<div class="secondChild"></div>
</div>
</body>
</html>
可以看到此代码在IE 6 7 8 下表现正常，但在chrome，firefox中表现为
写道
如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，“一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠”。
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
- 大小: 7.3 KB
分享到：
相关推荐
常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。...
今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下： html: 复制代码代码如下:”logo”></div> ”login_text”> ”error” class=”errorstyle”></div> </div> css: 复制代码代码如下:.errorstyle { ...
IE6 margin无效的bug， 解决方法有很多。 其中有个解决办法之一。 看代码： 复制代码代码如下: <div xss=removed>some contents</div> 在一些情况下IE6会无效，解决办法是下面的方式。看代码: 复制代码代码如下...
常见的浏览器下margin出现的bug有哪些？…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——...
信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也...
布局中，IE6的兼容性是比较令人头疼的，对于3像素BUG、margin双边距、下拦菜单被选择框摭住、躲猫猫BUG、边框线右若隐若现情况啊、、、、等等的产生机理，都有详细分析，有兴趣的童鞋可以看下以做参考。相信会在实际...
常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理...
margin折叠的问题，不是bug，而是正常的规则。 在css2.1中，水平的margin不会被折叠。 垂直margin可能在一些盒模型中被折叠： 1、在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。 最终的margin...
相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” ...
相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap（3px bug）、IE5/6 Doubled Float-Margin Bug（双倍边距的bug） 等等。但时常我们也会碰到复杂的 CSS CSSBUG在jb51.net介绍过也很多...
其它请参考:CSS hack 针对IE6，IE7，firefox显示不同效果 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行...
7.margin常出现的BUG: a:当第一个子元素和父元素没有加浮动的情况下，第一个子元素加的margin-top值会错误的也加在父元素上，其他方向没问题。 b:上下相邻两个元素之间的margin-top/bottom值不会叠加，会按照...
margin:0;} #yi{ background:#0033FF; height:298px; width:298px; padding:1px; } #er{ background:#FF0000; width:30px; height:30px; float:left; } #er2{ background:#00FF00; width:30px; height:30px; float:...
doctype html> 2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）解决方法：display:inline 3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9...
在IE6下（标准模式/怪异模式） 一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)，那么会自动的加一倍变成30px。 例： 复制代码代码如下: <!... <head>...border:1px s