发生情况:当给父元素的第一个浮动元素设置margin-left或者margin-right时，元素相应float left或right，这是margin会加倍
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>marginTest2</title>
<style>
.left{
background-color:gray;
float: left;
}
.margin{
margin-left: 20px;
}
.backcolor{
float:left;
background-color: red;
}
</style>
</head>
<body>
<div class="backcolor">
<div class="left margin" >ssssss</div>
</div>
</body>
</html>
正常表现：
IE6下表现:
解决方法:给浮动元素加上display:inline; 或者将margin-left改成padding-left
http://www.hicss.net/do-not-tell-me-you-understand-margin/ 写道
原理分析：
块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而之后对象是相对第一个对象的，所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以div class的所有样式可以用在这个display inline的元素上。
- 大小: 1.6 KB
- 大小: 1.7 KB
分享到：
相关推荐
标题中的“margin值在IE6变成双倍”指的是在Internet Explorer 6（简称IE6）浏览器中，当设置元素的外边距(margin)时，可能会遇到一个知名的兼容性问题，即所谓的“双边距问题”（Double Margin Bug）。这个问题主要...
5. **双边距问题**：在IE6中，浮动元素的内联元素会额外增加一个像素的边距，可通过负margin或者`display:inline-block`来修复。 6. **CSS选择器限制**：IE6不支持一些高级CSS选择器，如`:hover`在非链接元素上、`:...
3. **浮动元素的双边距** - IE6在某些情况下会给浮动元素的左侧或右侧添加额外边距。通过设置`display:inline`或`float:none`可以解决这个问题。 4. **相对容器中的绝对定位** - IE6在处理绝对定位时有时会出现...
布局中，IE6的兼容性是比较令人头疼的，对于3像素BUG、margin双边距、下拦菜单被选择框摭住、躲猫猫BUG、边框线右若隐若现情况啊、、、、等等的产生机理，都有详细分析，有兴趣的童鞋可以看下以做参考。相信会在实际...
当元素设置为`display:inline-block`时，IE6会出现双边距bug，可以通过设置`display:block`或`zoom:1;`（触发hasLayout）来消除。 5. **hasLayout机制** IE6特有的hasLayout机制，当元素满足某些条件时，会自动...
当元素设置为`float`后，在IE6/7中会出现margin双边距问题，即元素的左边距或右边距被加倍计算。这种现象在示例代码中通过设置`float:left`和`margin-left:10px`得以体现，IE6/7下实际应用的`margin-left`值会超过...
doctype html> 2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）解决方法：display:inline 3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9...
IE6中的一个常见问题是浮动元素的边距加倍问题，即所谓的 “双边距 bug”。为了解决这个问题，可以将浮动元素的 `display` 属性设置为 `inline`。 **示例：** ```css #floatElement { float: left; display: ...
1. **双边距问题：** IE浏览器中，当浮动元素内部包含绝对单位（如`px`）的`margin`时，可能会出现双边距问题，即实际外边距比预期大。 2. **解决方法：** 将浮动元素设置为`display: inline`可以避免双边距问题，...
IE6存在一个双边距Bug，在某些情况下，浮动元素的左边距会比预期的大一倍。通过将浮动元素的`display`属性设置为`inline`，可以有效地避免这个问题。 ##### IE6 图像透明背景问题 1. 使用GIF格式的图像替代PNG格式...
- 当一个元素设置了`float`属性并且具有`margin`时，在IE6中可能会出现双边距bug。 - 解决方案是将`float`元素的`display`属性设为`inline`。 - 示例代码： ```css div { float: left; margin-left: 10px; ...
5. **浮动bug**：包括3px像素空隙、浮动元素的宽度计算、浮动元素折行以及双边距bug等，这些都是IE6和IE7中的常见问题，需要特别处理。 6. **定位问题**：在IE6中，绝对定位元素的位置可能出现1px的偏差，同时浮动...
第七个问题，IE6的双边距bug，横向margin值会被放大两倍。使用display:inline可以修复这个问题，使元素不被视为块级元素，从而避免边距加倍。 最后，问题八涉及到IE6下的外边距消失。当父元素宽度和内容宽度差异...
3. IE兼容性问题：针对IE浏览器的特定bug，如双边距问题，min-height不支持等，使用条件注释或polyfill。 4. 动画卡顿：优化CSS3动画性能，避免过度使用复杂的动画，或者利用requestAnimationFrame提升流畅度。 5. ...
2. IE6 的双边距 Bug。当浮动元素设置了 margin 时，IE6 会显示不正确。解决方案是在浮动元素的样式中添加 `display: inline;`，将元素转换为行内元素。 3. IE6 和 IE7 中元素高度超出设定高度的问题。这通常是由于...
IE6存在一个著名的双边距BUG，即当元素设置为`float`属性后，其左右`margin`会出现加倍现象。解决此问题可以通过添加!important声明来覆盖IE6的错误计算： ```css margin-left: 10px !important; /* IE7, IE8, FF ...
CSS 兼容性问题解决方案 本文档旨在解决 CSS 中的兼容性问题，涵盖了多个方面的解决方案，包括 DOCTYPE 的影响、盒模型的解释不一致、ul ...在 IE 中，存在双边距 bug，解决方案是将 display:inline; 添加到 div 中。
- IE6双边距bug：可以使用`_display:inline;`修复。 - 渐进增强和回退策略：使用条件注释或CSS hack处理不同IE版本的差异。 - 自定义属性和事件对象属性：统一使用`getAttribute()`获取自定义属性，并处理`event`...