最近一直在修改z-blog这张皮，进展不是很快。主观上看是我精益求精，常常1象素较劲，耽误不少时间，但客观上还是反映出技术上不甚娴熟。
这不，前天遭遇一个IE6经典Bug —— “捉迷藏BUG”，为此耗费整整一天时间。
其实这个BUG在当初才接触z-blog1.7时就遇到过，只不过当时并没有细究。
IE6“捉迷藏”BUG在z-blog具体表现是：z-blog侧栏有一个“图标汇集”栏目，如果这个“图标汇集”是侧栏最后一个栏目，那么在IE6下浏览时，就会发生灵异现象：鼠标移到图标链接上，一些图标就会躲闪鼠标，上下移动，或者图标之间出现空行，好象在和你躲猫猫一样。而Firefox和IE7却是表现正常，中规中距，没有位移。
HTML代码：
<!-- 图标汇集 -->
<div class="function" id="divMisc">
<h3>增值服务</h3>
<ul>
<#CACHE_INCLUDE_MISC#>
</ul>
</div>
给这段ul 加上背景色看得清楚，在IE6，下面两个图标没有被div包含。
反复调试这个栏目的各个元素CSS属性，长宽等参数，无果。忍无可忍，只好向群内好友达人求救。Visc和内裤也在百忙之中，给出各种解决方案和调试方法，很可惜药不对症，最后这两位神仙也只好看着我和IE6打架。
临近下班，灵光突现，想起我以前为了克服图标乱动的问题，特意为“图标汇集”重建一个inclue文件，而原来的MISC文件则清空，镇着上面的图标汇集栏目，在模版源码还加上了“不可删除，否则图标错位”的注释。
何不用此方法一试，不过这次改良一下，不建一个完整的侧栏项目，只在“图标汇集”下，在加一个div浮动层。
HTML代码：
<!-- 图标云集 -->
<div class="function" id="divMisc">
<h3>增值服务</h3>
<ul>
<#CACHE_INCLUDE_MISC#>
</ul>
</div>
<div class="repairie"></div>
CSS定义：
.repairie { /* 修复IE6捉迷藏BUG */
clear:both;
width:220px;
height:1px;
}
果不其然，图标在IE6被镇住了，终于不乱动了。连忙把这一结果告诉内裤，内裤恍然大悟的说，莫不是这就是传说中，IE6经典的“捉迷藏”BUG。Google一下，好家伙，果然是这个大BUG。
“嗨！你不早说……”
“唉，我也是才想来……”
贴一下IE6这个经典的“捉迷藏”BUG（英语叫做：Peekaboo Bug）资料。
IE捉迷藏bug，之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。出现这个bug的条件是：一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的你元素中。如果清理元素砬到了浮动元素，那么中间的非浮支元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。
避名触发“捉迷藏”BUG方法是：
1、不要在div里面使用背景，或者保持div#clear和div#float在一起。
2、 给div一个明确的“宽度”或“高度”。
3、如果不小心，IE6和你“捉迷藏”怎么办，那就学我，在问题盒模型下面加个浮动层DIV，看着它。
记住我的CSS定义，clear:both; 和 height:1px; 是必须的。
