<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-top的bug ; 初始代码如下： html: 复制代码代码如下:”logo”></div> ”login_text”> ”error” class=”errorstyle”></div> </div> css: 复制代码代码如下:.errorstyle { ...
IE6双倍margin的bug是指在Internet Explorer 6 (IE6) 浏览器环境下，某些元素的外边距（margin）会被错误地渲染为两倍于设定值的现象。这一问题通常发生在设置了`float`属性的元素上，并且该元素还定义了宽度和外边...
IE双倍Margin Bug - **问题描述**：在Internet Explorer中，当元素设置了浮动属性，并且在同一侧设置了一个margin值时，该margin会被加倍计算。 - **修正方法**：可以通过添加`display:inline`或`display:inline-...
**IE5/6 Doubled Float-Margin Bug**：在 IE5 和 IE6 中，当一个浮动元素紧挨着另一个设置了外边距的元素时，可能会出现外边距加倍的问题。 **解决方法**： - 使用 `display: inline` 来让元素表现得像内联元素一样...
### 1. 居中布局问题 在CSS布局中，将一个元素水平居中是最基本的需求之一。通常，通过设置`margin: auto;`可以轻松实现这一点。然而，在IE6中，这一操作往往会导致布局错乱，元素不会正确居中。 **解决方案**：...
在互联网的早期，Internet Explorer 6 (IE6) 是一款广泛使用的浏览器，但它存在许多兼容性和渲染问题，其中最令人头疼的问题之一就是“margin塌陷”或者“margin无效”的BUG。这个问题主要体现在当我们在IE6中尝试为...
- 使用`zoom: 1;`来触发IE的`hasLayout`属性，从而解决某些布局问题。 以上就是关于CSS样式BUG的一些常见问题及其解决方案。理解这些BUG的原因并掌握正确的解决方法对于提高Web页面的兼容性和用户体验至关重要。
### IE特有Bug知识点解析 #### 一、概述 Internet Explorer（简称IE）作为曾经市场上最主流的浏览器之一，在其发展过程中积累了一系列特有的兼容性问题。这些问题是由于IE浏览器自身的技术限制以及对某些Web标准的...
1. 一个值代表所有边距相同，如`margin: 10px;`。 2. 两个值分别代表上下和左右，如`margin: 10px 20px;`。 3. 三个值代表上、左右和下，如`margin: 10px 20px 30px;`。 4. 四个值对应上、右、下、左，如`margin: 10...
标题中的“margin值在IE6变成双倍”指的是在Internet Explorer 6（简称IE6）浏览器中，当设置元素的外边距(margin)时，可能会遇到一个知名的兼容性问题，即所谓的“双边距问题”（Double Margin Bug）。这个问题主要...
最后，不同浏览器对CSS的解析可能存在差异，导致margin在某些情况下出现bug。因此，开发者需要熟悉常见的浏览器兼容性问题，并使用前缀（如 `-webkit-`，`-moz-` 等）或者reset样式来确保跨浏览器的一致性。 总之，...
### 最常见的9种IE_css_bug及fix：深入解析与解决方案 #### 1. 居中布局问题 在Web开发中，将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标，但在IE6中，这种方法却会遇到问题。...
常见的浏览器下margin出现的bug有哪些？…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——...
布局中，IE6的兼容性是比较令人头疼的，对于3像素BUG、margin双边距、下拦菜单被选择框摭住、躲猫猫BUG、边框线右若隐若现情况啊、、、、等等的产生机理，都有详细分析，有兴趣的童鞋可以看下以做参考。相信会在实际...
标题：“css_bug与解决方法” 描述详述：本文旨在探讨并提供解决各种浏览器中的CSS bug的方法与技巧。在Web开发中，CSS（层叠样式表）是实现网页美观设计的关键技术之一，但不同浏览器对CSS的支持程度和解析方式...
1. **textarea的padding问题**： 微信小程序中的textarea组件在模拟器上可能不显示padding，但在真机环境下，特别是在Android和iOS设备上，会有自带的padding，导致样式显示不一致。为了解决这个问题，开发者可以...