IE中没有完全显示出内容?原来是IE6的Peekaboo(躲躲猫) Bug! 02 七月 2010 at 10:59 下午 7条评论

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

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

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

发表评论

本篇文章已有7条评论

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

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

  3. IE6不是已经被死亡了么?

  4. 激发hasLayout我一般设置下position~

  5. 现在用ie6的人还是很多

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

  7. 这本书我看过,我是我不懂。。

欢迎发表评论

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

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

设置你的头像