IE6中display为none时的奇葩问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2015-01-14 11:14:39　-　阅:　-　评:2　-　积分:0

今日无意间又看到一篇关于ie6 bug的文章，然后我又如饥似渴的阅读了起来。
原文地址：IE6中display为none时仍占据3px？？？

至于具体是什么bug呢，就是给一排div中的某一个div设置display:none时引起的奇葩问题。

我现在需要实现一个一行四列的布局，大致效果如图一：好了，下面我们来按照正常的步骤进行写代码。

<div class="box clearfix">
　<div class="list">box111</div>
　<div class="list">box222</div>
　<div class="list">box333</div>
　<div class="list">box444</div>
</div>

<style type="text/css">
*{margin:0;padding:0}
.box {width:440px;background:#0CF;margin:10px auto;}
.list {width:98px;height:98px;margin:5px;border:1px solid #960;float:left;_display:inline;overflow:hidden;}
.clearfix:after{content:"";clear:both;display:block;height:0;}
.clearfix{*zoom:1;}
.hide{display:none;}
</style>

上面的代码最终的效果就是图一中的样子。现在，我们需要在这个box里面添加5个div，但要隐藏掉其中一个。

由于上面的代码中只有4个div,现在的要求是5个，那么我们只需要再添加一个box555和任意隐藏掉其中一个即可，下面来修改代码。

<div class="box clearfix">
　<div class="list">box111</div>
　<div class="list hide">box222</div>
　<div class="list">box333</div>
　<div class="list">box444</div>
　<div class="list">box555</div>
</div>

我们来看下在浏览器中的效果图二：看似已经达到了我们的要求，但ie6中还没有测试，现在我们到ie6中测试看效果。

ie6中的效果如图三：你惊呆了吗？box555这个div竟然跑到了第二行，太不科学了吧！按照正常思路理解：box里面的所有div都设置了浮动，正常情况下，在隐藏掉一个div时，其它4个div仍能正常显示一排才对，但现在却成了两行。我们都知道，一般情况下这种情况是由于宽度不够引起的，下面我们来调整下box的宽度。最终发现当box的宽度为443px时，ie6中正常了！那么问题来了，这个3px问题到底是谁触发的呢？

经过一番测试，我们发现一个现象：当box内的第一个和最后一个div设置display:none时，剩下4个div均能同行显示；当box内除第一个和最后一个div外的div设置display:none时，剩下4个div均不能同行显示，因为有3px在作怪。而解决的方法就是设置背景色或背景图片均可。background-color:transparent或者background-image:url(about:blank)此时我想起了那个绝对定位后的超链接也是通过此种方法解决，难道二者有什么关联？（关于绝对定位后的超链接问题，可点此处文章《ie中绝对定位后的bug》）

虽然上面说的设置背景和修改宽度都能解决问题，但是我发现一个更有趣的问题，请看完整代码。

<!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>IE6中display:none时的奇葩问题--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="IE6中3px问题,display为none引发3px占位,ie6 bug,谍影重重,一只猪的故事,文本溢出 ">
<style type="text/css">
*{margin:0;padding:0}
.box {width:440px;background:#0CF;margin:10px auto;}
.list {width:98px;height:98px;margin:5px;border:1px solid #960;float:left;_display:inline;overflow:hidden;}
.clearfix:after{content:"";clear:both;display:block;height:0;}
.clearfix{*zoom:1;}
.hide{display:none;}
</style>
</head>
<body>
<div class="box clear">
<div class="list">box111</div>
<div class="list hide">box222</div>
<div class="list">box333</div>
<div class="list">box444</div>
<div class="list">box5555</div>
</div>
</body>
</html>

在ie6中点击上面的“运行代码”后那画面太美我不敢看，如图四：我不得不再次惊呆！这不是文本溢出么？曾经的谍影重重和一支猪的故事怎么会出现在这里？！这些bug与display:none到底有无关联？没人告诉我......

对于“谍影重重”和“一支猪的故事”，官方称造成此bug的原因有很多，例如：浮动、注释、宽度、高度等等。而对于这个display:none引起的奇葩问题，我觉得我们还是要注意一下，以免日后重犯。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2015-01-14/244.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！