出现场景:
两个元素一个浮动一个不浮动，非浮动元素在浮动元素后面，并且非浮动元素设置了宽度(应该是触发了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只能说是半支持，好吧，这么说吧，可能不太严谨，就是背景图片固定的效果似乎只在根结点起作用。举个很简单的例子： 先看这段css代码： body{background:url(../image/404.png) no-repeat fixed center ...
在IE7中两个div是紧挨着的，但是在IE6中会出现两个div之间出现3px左右的间隙
1、IE 6 中 ，DIV 使用背景图片（或直接插入图片在DIV中）的时候，在图片的下端会出现一条空白间隔，经测量，刚好是 3px . 解决办法： IE6默认字号是12pt，默认行高是normal。 找到原因就好解决了，给DIV加上：font-...
我将介绍的是IE6浮动换行bug解决办法之一 虽然不是最好的办法但是 比较实用简单的办法 看代码： 复制代码代码如下: .main { clear: both; height: auto; margin: 0 auto; overflow: hidden; width: 980px; } ....
当li的子元素中有浮动（float）时，IE6/IE7中元素的下面会产生4px空隙的bug。 XHTML 复制代码代码如下: ”list”> <li><div>vapour</div></li> <li><div>百度</div></li> <li><div>淘宝</div></li> <li><div>迅雷...
本文整理了ie中div的垂直居中问题、margin加倍的问题、ie6下页面min-width/height与max-width/height问题、ie6 3px bug及ie6捉迷藏的问题等等，感兴趣的朋友可以参考下哈
可是在IE6下查看，却变成了right:1px的效果了： IE6还有奇数宽度的bug，解决方案就是将外部相对定位的div宽度改成偶数。查看源码： CSS代码 #out { width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*...
3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。 1）字体大小为奇数之边框高度少...
doctype html> 2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）解决方法：display:inline 3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9...
6. IE5 和IE6的BOX解释不一致 3 7. ul和ol列表缩进问题 3 8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3...
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!--[if IE 6]> <style type...
把以上三行代码加到需要最小宽度的div里即可，原理是使用IE6本身的BUG(当块级元素内部的东西超出此块级元素的高度时，块级元素的高度会被撑开，也就是说IE6中的height属性本身就等同于min-height)。 方法二： 复制...
在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动3.在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动4.P标签中不要嵌套块元素5.IE6下最小高度问题在IE6下元素的高度的小于19px的时候，会被...