九乡新闻网:IE捉迷藏 - bluesqsr的专栏 - CSDN博客
来源：百度文库 编辑：九乡新闻网 时间：2024/04/28 13:29:26
IE捉迷藏
DIV+CSS
捉迷藏问题(Peekaboo Bug)是IE浏览器中的一个非常典型的对css的支持上的bug，说它是bug毫不为过，捉迷藏问题主要出现在IE6浏览器，当div应用稍显复杂时，常常出现的情况是在用于版式布局时，有时当制作一个左右两栏的网页，而每个栏中又有一些链接、div等，这个时候容易引发捉迷藏问题，如本例中的代码
本例中的xhtml结构代码尝试构建一个二栏式布局，其中#left为左栏，#right为右栏，包含bottom文字的为底部，我们尝试在这样一个结构中加入一些虚假内容：
接下来就是样式了，为了便于本例bug的显示，使用css先定制这些对象的基本属性，然后加粗边框：
#clear {
clear: both;
}
#layout {
background: #e6e6e6;
}
#layout a:hover{
background: #333;
}
#left {
float : left;
border: 4px solid #333;
padding : 5px;
width : 200px;
height: 200px;
}
#right div {
border: 3px solid #0c0; background: #dde;
}
在IE中预览页面，会发现刚打开时#right中的内容竟然没有显示出来，当鼠标选择这个区域时，内容的确在页面中，而再当鼠标移上左边的链接时，右边内容就奇怪的跑了出来。可不要以为这是4个不同的页面，这就是上面代码的实例，在IE6中因为鼠标与链接进行响应以及鼠标选中文字的状态。这便是著名的IE6捉迷藏bug，不仅在目前实例中，在其它情况下也可能出现，而且具体的触发机制目前仍不能合理的归类，而在其它浏览器下显示没有任何问题，所以至今为止，只要是IE6浏览器中发现内容不能显示的情况，基本上都可以算是捉迷藏bug。
解决方案
捉迷藏bug如何解决?在使用一些小技巧来解决这个bug之前，应当听听来自positioniseverything.net的网站专家的建议，positioniseverything.net是网上最早开始研究css在浏览器下兼容性的组织之一，而捉迷藏bug也是由positioniseverything首先整理出来的，对于此问题，应当从两方面入手：一是使用技巧去解决bug，二是通过一些编码习惯预防捉迷藏情况的发生。positioniseverything提供了4个途径供大家来预防和解决捉迷藏问题：
- 在对页面上的对象使用float浮动之后，最后在下面使用带有clear:both;的div对页面上进行一些浮动上的清理工作，并且尽量避免对#layout使用background。
- 如果有可能，可以给#layout使用固定宽和高，尽管这样会对页面有所限制，但能消除一些捉迷藏的影响。
- 可以尝试给#layout和#left使用position:relative。
- 对#layout使用line-height属性，强制浏览器对其中的内容进行行距调整，从而可以消除捉迷藏bug，例如使用line-height:1.2;就能够使页面运作变得正常。捉迷藏bug虽然是IE留下的后遗症，但是另一方面我们应当在div的嵌套上遵循一些习惯，尽量使用最少的层次嵌套来满足页面设计需要，使页面结构简单、实用、易控制与管理，尽可能的减少由于不必要的嵌套引来的连锁问题。