【IE6的疯狂之三】IE6 3像素BUG的实例

问题: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>

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6的疯狂之三】IE6 3像素BUG的实例

评论 18

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    你将a2添加float:left 就可以了

    maskkid10年前 (2009-06-06)回复
  2. #-48

    你试试把DTD声明改成transitional

    Michael10年前 (2009-07-21)回复
  3. #-47

    我是将右边的DIV设置成{_position:relative;_left:-3px}
    用HACK实现的 现在用用还可以

    阿远9年前 (2009-09-15)回复
  4. #-46

    我觉得只需要下面的代码就搞定了,不需要那么多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; }

    actualist889年前 (2009-10-19)回复
  5. #-45

    .a2 #jing和.a2 #jing2不要高度定死就可以了。

    天天吃醋9年前 (2009-11-09)回复
  6. #-44

    这个不算是IE6单独的BUG,所有ie版本都这样。

    蚂蚁9年前 (2009-11-13)回复
  7. #-43

    .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

    逆刀沉沦9年前 (2010-03-08)回复
  8. #-42

    一个建议采用float布局
    二个建议每段内容都用一个标签单独控制。
    三个可以参考一下二楼的主意。

    前端开发9年前 (2010-05-03)回复
  9. #-41

    IE6的3像素可以用margin-right:-3px;来解决

    布叮9年前 (2010-07-09)回复
  10. #-40

    .a1{ margin-right: -3px; }
    .a2{height: 1%; margin-left: 0px;}

    心情鱼焖9年前 (2010-08-18)回复
  11. #-39

    完美解决方案:

    无标题文档

    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
     

    无名7年前 (2011-12-20)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏