出现场景:
两个元素一个浮动一个不浮动，非浮动元素在浮动元素后面，并且非浮动元素设置了宽度(应该是触发了haslayout)，如此这般IE6下两个元素会出现3px间隔
<!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>
.gray {
background-color:gray;
}
.red {
background-color: red;
}
.left{
float: left;
height:100px;
}
.margin-top{
margin-top: 5px;
}
.widht{
width:200px;
}
</style>
</head>
<body>
<div class="left gray margin-top" >float</div>
<div class="red widht">nofloat</div>
</body>
</html>
IE 6下表现
IE 7表现
firefox chrome ie8表现
（这里还有浮动的bug，先暂且不论）
解决方案：
1：将非浮动元素也改为浮动。
2：使用IE6 hack 在浮动元素上加上 _margin-right:-3px;消除3px
- 大小: 3.3 KB
- 大小: 3.1 KB
- 大小: 3.4 KB
分享到：
相关推荐
在网页设计中，IE6浏览器经常会给开发者带来一些独特的挑战，其中一个典型问题就是"IE6 3px Bug"。这个bug表现为在IE6下，当两个浮动（floated）的div相邻时，它们之间会出现一个3像素的间距，这与在其他浏览器...
### IE6特有bug兼容性问题整理 #### 1. 浮动(float)与相邻非浮动元素的表现差异 - **问题描述**： 在不同浏览器中，对于`float`元素和相邻非`float`元素的处理方式存在差异。具体表现为，在IE6中，当一个元素设置...
在IE6中，尝试设置非常小的高度值（如2px或更小）时，浏览器可能无法正确显示该高度，或者将其渲染得比预期大。这主要与IE6的CSS渲染引擎有关。 **解决方案**：对于这种情况，可以尝试使用透明的背景图片替代高度...
3. `* html select {…}` 适用于 IE6 以及更低版本，但请注意，IE5.x 也能识别这个 Hack。其他浏览器则无法识别。 4. `html/**/ >body select {…}` 和上面的 `* html select {…}` 效果相同，都是针对 IE6 和更低...
### 最常见的9种IE_css_bug及fix：深入解析与解决方案 #### 1. 居中布局问题 在Web开发中，将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标，但在IE6中，这种方法却会遇到问题。...
在Web开发领域，Internet Explorer（IE）曾是程序员们的一大挑战，尤其是对于前端开发者来说，因为IE中存在许多特有的bug。这些bug不仅让开发者头疼，还严重影响了开发效率。本篇将详细介绍9个最常见的IE bug及其...
以下是一些针对IE浏览器的CSS常见bug及解决策略： 1. **浮动元素的双倍margin问题**： 在IE6中，如果一个浮动元素设置了margin属性，可能会导致实际的外边距比预期的要宽一倍。为了解决这个问题，可以将浮动元素的...
IE6 对某些字体的渲染存在一个已知的 bug。当设置 `font-size: 13px` 时，IE6 不会正确地显示 Tahoma、Verdana 等特定字体的 13px 大小，而是会自动调整到一个较大的字体大小。这是因为 IE6 使用的是一种称为“逻辑...
这个Bug主要出现在浮动元素与非浮动元素相邻的情况下，导致非浮动元素在IE6下向右偏移3像素，影响页面布局的精确性。 要理解这个Bug的原因，我们需要知道在IE6中，元素的“hasLayout”机制起着关键作用。hasLayout...
标题“解决ie6下3像素bug问题”指的是在IE6浏览器版本下，两个浮动元素之间出现的不期望的3像素间隙问题。这个问题是一个常见的前端bug，主要是在IE6浏览器中由于其解析CSS的特殊性导致的，而这种问题在其他浏览器中...
以下将详细介绍IE6中常见的几个BUG及其解决方法，包括DIV中背景图片下方出现的3px空白间隔问题、双倍浮动BUG、注释引起的文字错位BUG以及著名的3px间隙BUG。 1. DIV中背景图片下方的3px空白间隔问题 在IE6中，当...
- IE6中，文本相对于容器可能会有3像素的偏移。可以通过添加`text-indent:-3px;`来修正。 7. `hasLayout`问题 - IE6中的`hasLayout`机制可能导致布局问题，表现为元素尺寸计算不正确。通过设置`zoom:1;`或改变...
标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”，这揭示了在Web开发中，尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时，开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为，...
1. **IE6的盒模型问题**：IE6在处理CSS盒模型时存在bug，导致元素的宽度计算出现问题。 2. **IE7的浮动元素错位**：在IE7中，当元素设置为`float`时，可能会出现与其他元素错位的现象。 3. **IE8的渲染模式选择**：...
**DIV浮动IE文本产生3像素的bug** - **问题描述**：当左侧对象浮动时，右侧对象内的文本可能会出现额外的3像素间距。 - **解决方案**：可以在IE专用的样式表中添加`margin-right: -3px;`来修正。 ```css *...
在互联网技术日新月异的今天，老旧的浏览器版本往往会带来许多兼容性问题，而其中IE6的3像素bug就是前端开发者们挥之不去的噩梦。这个bug源于Internet Explorer 6 (IE6)的一个渲染错误，使得在特定布局条件下，文字...