代码之家 › 专栏 › 技术社区 › ilija veselica

IE6-文本被无缘无故隐藏?

internet-explorer css html

ilija veselica · 技术社区 · 15 年前

很长一段时间以来,我一直有这个问题,但我总是设法以某种方式避免它(通过删除元素或改变顺序),现在它又出现了,我不知道如何摆脱它。首先,它出现在我的管理面板中,但只有少数用户访问,所以这不是什么大问题(没有人使用IE6),但现在这个问题出现在我的门户索引页上,我必须消除它,因为15%的门户访问者是IE6访问者。 LINK 如果您在IE6中打开此页面,您可以看到第二条新闻(标题为:Test one)没有任何文本,只有图像。好吧,如果你把鼠标放在图像上,你会看到有一些文字。这个问题只有在我进入Pararaf时才会发生,因为Pararaf的高度不比图像的高度大。如果我输入相同的图像,但有更多的文本,这个显示/隐藏问题就会消失。我希望有人知道为什么会发生这种情况,因为这个问题已经折磨了我好几年了,但我从来没有弄清楚这个问题的主要原因是什么,以及如何避免它。

欢迎任何帮助! 伊利

以下是此问题的解决方案: http://www.positioniseverything.net/explorer/peekaboo.html

2 回复 | 直到 15 年前

ilija veselica 15 年前

好的,从页面进行复制粘贴是最简单的,页面上有详细的说明:

<!--********** 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#float前进 div#floatholder,前提是外部浮动实际上接触到在div#floatholder中清除div!

我们知道有三种方法可以

保持清除div不接触浮子,或避免使用非常理想。

给出div#floatholder和div#float的“位置:相对”。是

hasLayout (现在是首选方法)

我们建议使用条件注释将hasLayout修复程序提供给IE6和只在下面。进一步的细节有助于此方法可在 Zoom Fix page .

Simon Willison 对于

这个bug被称为躲猫猫,下面是对一切的详细解释: http://www.positioniseverything.net/explorer/peekaboo.html

尽管如此,我必须承认,当我设定所有这三个步骤时,它对我是有效的。在前两个之后,它不起作用,但在我将display:inline添加到floatingdiv之后,它起作用了。

BryanH Philipp Andreychev 15 年前