2009-10-10 65 views
1

对于veeery很长一段时间我有这个问题,但我总是设法避免它(通过删除元素或更改顺序),现在在这里又是,我不知道如何摆脱它。首先,它出现在我的管理面板中,但只有很少的用户访问,所以它不是什么大问题(没有人使用IE6),但现在这个问题出现在我的门户索引页面上,我必须摆脱它,因为门户的15%访问者是IE6访问者。 这里的LINK测试门户版本: 如果你在IE6中打开这个页面,你可以看到第二个消息(标题为:Test One)没有任何文本,只有图像。那么,如果您在该图片上进行鼠标悬停,则会看到有一些文字。只有当我输入高度不大于图像高度的paragraf时,才会出现此问题。如果我输入相同的图像,但有更多文本,则此显示/隐藏问题会消失。我希望有人知道为什么会发生这种情况,因为这个问题几年来一直在折磨我,但我从来没有想过这个问题的主要原因是什么以及如何避免这个问题。IE6 - 文字被隐藏没有理由?

欢迎任何帮助! 岛

编辑:

下面是这个问题的解决方案: http://www.positioniseverything.net/explorer/peekaboo.html

+0

我非常抱歉,因为我是一名mac用户,所以我很难分辨究竟是什么原因导致问题,但还有IE开发工具栏,它可以帮助您使用CSS类来查看隐藏文本的内容。这绝不是没有理由:(每个浏览器都有它自己的理由(这是令人伤心的),但总有一个)谢谢! – 0100110010101 2009-10-10 19:45:08

+0

嘿opetrov,感谢评论。同时我找到解决方案! – 2009-10-11 12:09:39

+0

发布您找到答案的解决方案,而不是在您的问题中提出。 – 2009-10-13 22:17:36

回答

1

嗯,这是最容易的从网页复制粘贴在那里的详细解释:

HTML代码:

<!--********** Start of demo ***********--> 

<div id="floatholder"> 

<div id="float"> 
<br /> 
<span>&nbsp;Float&nbsp; 
<br /><br /> 
<a href="#">&nbsp;test link&nbsp;</a> 
</span> 
</div> 

This is bare text. <a href="#">Test link</a> 

<div style="border: 3px solid #f00; background: #dde;">This is text inside a div. 
<a href="#">Test link</a></div> 
This is bare text. <a href="#">Test link</a> 
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div. 
<a href="#">Test link</a></div> 
This is bare text. <a href="#">Test link</a> 
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div. 
<a href="#">Test link</a></div> 
This is bare text. <a href="#">Test link</a> 

<div id="clear">Clearing div</div> <!--******* Note: a cleared <br> will not prevent bug *******--> 

<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div 
does not touch float, bug is not triggered. <a href="#">Test link</a></div> 
</div> 

<!--********** End of demo ***********--> 

这里是screenshoot from IE6

修正:

的修复:

最后,即使div#浮动前导 div#floatholder,但前提是此外部浮动实际触及 清除div#floatholder!中的div,将触发此错误 !

我们知道有三种方法可以防止这个错误, 。

  1. 保持清除div不接触浮动,或避免在div#floatholder上使用 背景。不是 完全理想。
  2. 同时给div#floatholder和div#float'position:relative'。是 一定要充分测试这种方法。
  3. 给DIV#的FloatHolder hasLayout(目前首选方法)

我们建议使用条件注释 养活一个hasLayout的修复程序IE6和 下面只。有关 有用的更多详细信息,请参阅Zoom Fix page

感谢Simon Willison为 及时截图。

这个bug被称为捉迷藏,这里是一切的详细解释: http://www.positioniseverything.net/explorer/peekaboo.html

虽然,我不得不承认,这对我来说工作时,我将所有这些3个步骤。后两个它没有工作,但我添加显示后:内联浮动div它的工作。

0

能否请您发布(最起码的例子)这里的代码,以便不久后,我们可以参考它的服务器的副本消失(...就像现在)?否则,这个问题不会成为任何人参考或学习的工具。