IE中没有完全显示出内容？原来是IE6的Peekaboo(躲躲猫) Bug！

/ 前端开发 / , / 4,277ºC
8

今天看《CSS禅意花园》的时候，书尾的结语中提到了一些技巧。其中“IE中没有完全显示出内容？”引起了我的注意。

因为我的博客在IE6下也有这种情况发生，具体表现在回复列表中的部分内容不显示，但事实上它就在那里！截图如下：

IE6 Peekaboo(躲躲猫) Bug


Guillotine Bug出现的条件：  

  1. 一个container（容器）  
  2. container（容器）里有一个浮动的元素（无论左右）  
  3. 后面紧跟一个没有设置浮动的内容，里面包含链接  
  4. 链接的a:hover样式有变化时，改变链接颜色除外。  （尤其以background、padding、border、Text Style这些属性效果最为明显。）  
  5. 浮动的元素比没有浮动的内容高 

而我的评论列表的结构也十分符合以上的描述，如下图所示：
每个评论一个div，div中头像设置了左浮动，紧接着的是带链接的昵称。于是乎昵称和之后的时间、评论内容会消失不见。

IE6 Peekaboo(躲躲猫) Bug

解决方法很简单，只要让div的hasLayout设为true。那么如何激发元素的 haslayout 属性？设定明确的高度或宽度！

比如我的就是加上.comment-body{height:100%}。

详细介绍可以到这里查看：http://www.positioniseverything.net/explorer/peekaboo.html

发表评论（已有 8 条评论）

设置头像

*

:wink: :twisted: :smile: :sleep: :shock: :sad: :roll: :razz: :oops: :neutral: :mad: :grin: :evil: :eek: :cry: :cool:

  1. Suyos 说：

    我已经屏蔽IE8以下的IE浏览器了

    回复 @TA
  2. zhy 说：

    这本书我看过，我是我不懂。。

    回复 @TA
  3. 小松 说：

    IE6确实让很多网页设计者头大~

    回复 @TA
  4. 小羿 说：

    现在用ie6的人还是很多

    回复 @TA
  5. keelii 说：

    激发hasLayout我一般设置下position~

    回复 @TA
  6. u14man 说：

    IE6不是已经被死亡了么？

    回复 @TA
  7. classic tall boots 说：

    IE6早过时了，不过还是很多人在用。。。还是早早的升级吧

    回复 @TA
  8. MK 说：

    IE6这东西害人不浅，我也为它折腾不少。之前我的边栏在IE6下会下沉。。。

    回复 @TA