2009-10-10 60 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

能否請您發佈(最起碼的例子)這裏的代碼,以便不久後,我們可以參考它的服務器的副本消失(...就像現在)?否則,這個問題不會成爲任何人蔘考或學習的工具。