【IE6的疯狂之三】IE6 3像素BUG的实例
时间：2009年03月25日作者：愚人码头查看次数:10,004 views评论次数：18
问题：2列布局。左列固定，右列液态
我需要做一个布局。
2列，左边列固定宽度。右边列使用剩余宽度。整体宽度不固定，这样不管在17 还是19的屏幕上，左边列始终宽度不变，右边列宽度始终占据剩余宽度。
但是我写这个布局缺在ie6下面始终解决不了3像素bug。
请在IE6下测试
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “<a href=”http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd” target=”_blank” rel=”external”>http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd</a>”>
<!– saved from url=(0027)<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a> –>
<HTML xmlns=”<a href=”http://www.w3.org/1999/xhtml” target=”_blank” rel=”external”>http://www.w3.org/1999/xhtml</a>”><HEAD><TITLE>关于3像素bug的延生</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=gb2312″>
<STYLE type=text/css>BODY {
FONT-SIZE: 12px
}
.a1 {
BACKGROUND: #333; FLOAT: left; WIDTH: 100px; COLOR: #ffffff; HEIGHT: 240px
}
.a2 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 100px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.a2 #jing {
BACKGROUND: #00ccff; MARGIN-LEFT: -3px; HEIGHT: 100px
}
.a2 #jing2 {
BACKGROUND: #ff9900; HEIGHT: 100px
}
</STYLE>
<META content=”MSHTML 6.00.6000.16587″ name=GENERATOR></HEAD>
<BODY>
<DIV class=a1>我是class=a1 <BR><A style=”COLOR: #ffff00″
onclick=”this.parentNode.style.height=’100px’”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为100</A><BR><A
style=”COLOR: #ffff00″ onClick=”this.parentNode.style.height=’150px’”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为150</A></DIV>
<DIV class=a2>
<DIV
id=jing>我是id=jing<BR>这个问题存在于IE6里面。ie7，opera，ff都没问题。观察class=a2的div所设置的边框会发现，a2和a1之间是没有距离的。但是a2
里面元素（文本）会和a2之间产生类似padding-left:3px;的效果。利用以往的设置负值，也没办法消除第一个元素id=jing和a2的距离。更有意思的是当我设置了_margin-left:-3px;原本id=jing和a2
之间的3像素距离变成了2像素。但是及时我_margin-left 的负值设置得再大，不能完全消除</DIV>
<DIV id=jing2>我是id=jing2<BR>当a1的高度大于id=jing这个元素的高度的时候，di=jing2
也会产生和a2之间类似padding-left：3px的间距。 当a1 小于或者等于id=jing的时候，id=jing2
就不会和a2之间有间距。<BR>本来我只是想做一个左列固定，右列自动适应剩余宽度的布局。但是没想到发现了这个问题。求某位高手告诉我怎么解决。
</DIV></DIV></BODY></HTML>
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【IE6的疯狂之三】IE6 3像素BUG的实例》
说明
你将a2添加float:left 就可以了
[回复]
你试试把DTD声明改成transitional
[回复]
我是将右边的DIV设置成{_position:relative;_left:-3px}
用HACK实现的 现在用用还可以
[回复]
我觉得只需要下面的代码就搞定了，不需要那么多css
body{font-size:12px;}
.a1 {background:#333; float:left;; width: 300px; color:#ffffff; height: 100%; }
.a2 {border:1px solid #000;margin-left:300px;}
.a2 #jing {background:#00ccff;}
.a2 #jing2 { background:#ff9900; }
[回复]
.a2 #jing和.a2 #jing2不要高度定死就可以了。
[回复]
这个不算是IE6单独的BUG，所有ie版本都这样。
[回复]
.grid-l{float:left;width:172px;_margin-right:-3px;background-color:#E1E1E1;}
.grid-r{margin-left:172px;_margin-left:0px;}
我是这么实现的，grid-l为左层，grid-r为右层，这样能避免firefox，IE8等游览器产生的其它同步bug
PS:不是IE6的3pxbug
[回复]
一个建议采用float布局
二个建议每段内容都用一个标签单独控制。
三个可以参考一下二楼的主意。
[回复]
IE6的3像素可以用margin-right:-3px;来解决
[回复]
.a1{ margin-right: -3px; }
.a2{height: 1%; margin-left: 0px;}
[回复]
完美解决方案：
无标题文档
BODY {
FONT-SIZE: 12px
}
* { padding:0; margin:0;}
#box {
width: 100%;
position: relative;
}
.a1 {
BACKGROUND: #333;
FLOAT: left;
WIDTH: 100px;
COLOR: #ffffff;
HEIGHT: 340px;
position: absolute;
left: 0px;
top: 0px;
}
.a2 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 100px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; background:#F0F;
}
.a2 #jing {
BACKGROUND: #00ccff; height:100px;
}
.a2 #jing2 {
BACKGROUND: #ff9900; HEIGHT: 120px;
}
我是class=a1 点击设置a1的高度为100#”>点击设置a1的高度为150
我是id=jing这个问题存在于IE6里面。ie7，opera，ff都没问题。观察class=a2的div所设置的边框会发现，a2和a1之间是没有距离的。但是a2
里面元素（文本）会和a2之间产生类似padding-left:3px;的效果。利用以往的设置负值，也没办法消除第一个元素id=jing和a2的距离。更有意思的是当我设置了_margin-left:-3px;原本id=jing和a2
之间的3像素距离变成了2像素。但是及时我_margin-left 的负值设置得再大，不能完全消除
我是id=jing2当a1的高度大于id=jing这个元素的高度的时候，di=jing2
也会产生和a2之间类似padding-left：3px的间距。 当a1 小于或者等于id=jing的时候，id=jing2
就不会和a2之间有间距。本来我只是想做一个左列固定，右列自动适应剩余宽度的布局。但是没想到发现了这个问题。求某位高手告诉我怎么解决。
ddd
[回复]