牧羊岛

懒是不会有好果子吃滴//

导航

IE6的3px BUG

Posted on 2010-03-26 15:47  牧羊岛  阅读(8922)  评论(4编辑  收藏  举报

【2010-05-18】补充:

今天在做一个项目的时候有对该BUG又有了新发现:

  • 不是给做左边的div的margin-right:-3px;而是给右边的div的margin-left:-3px;(如果已经有margin-left责在原始值上减3px)

下图可以证明这一点:

上图说明:如果给左边的新闻列表做margin-right:-3px;结果是右边的宽度依旧不够三张图片的位置。 

 

【原始文章】

先看效果【IE6】,其实修复方法已经写了,呵呵

 

产生条件:当一个与浮动元素相邻的非浮动元素并没有指定具体的高度或宽度时,非浮动元素中的内容会和浮动元素的边界产生3px的空隙。这个空隙只沿着浮动元素显示,当浮动终止时,文本就恢复正常了。如果非浮动的元素指定了一个具体的宽度或高度,这个时候非浮动元素和浮动元素出现了3px的空隙。

其他浏览器效果:

 

 

全部代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*
{font-size:14px;}
.bg
{background:#CCC; border:#999 solid 1px; line-height:18px; font-size:12px; margin:5px 0;}
.one
{float: left; width: 100px; border: solid 1px red;}
.two
{border: solid 1px red;}
* html .eg2 .two
{height: 1px;}
* html .eg3 .one
{ margin-right: -3px; }
* html .eg4 .two
{ float: left; }
</style>
</head>
<body>
<div class="bg">不指定高度,与文字产生3px间距</div>
<div class="eg1">
<div class="one">hello</div>
<div class="two">hello</div>
</div>
<div class="bg">指定高度后,div间3px间距</div>
<div class="eg2">
<div class="one">hello</div>
<div class="two">hello</div>
</div>
<div class="bg">[修复方法1]* html .one{ margin-right: -3px; }//仔细看两个边框加起来变成了1像素</div>
<div class="eg3">
<div class="one">hello</div>
<div class="two">hello</div>
</div>
<div class="bg">[修复方法2]* html .two{ float: left; }//这个需要给右边的也定宽度</div>
<div class="eg4">
<div class="one">hello</div>
<div class="two">hello</div>
</div>
</body>
</html>