2008-09-18 153 views
1

我現在正在工作的頁面上有一列用性感陰影和角落的樣式框,而不是使用示例here。我不得不承認,我不完全理解CSS是如何工作的,但它看起來好極了。YUI自動完成渲染在IE7中的其他頁面元素下渲染

在最上面的框內是用於搜索的文本類型輸入。該搜索框連接到一個YUI autocomplete小部件。

在Mac上的Firefox3,Windows上的FF2,Mac上的Safari中一切正常。在WinXP的IE7中,自動填充建議在圓角框下面呈現,使得除了第一個之外的所有內容都不可讀(儘管您仍然可以看到足夠多的可以在IE7之間瀏覽的內容,我認爲IE7真的獲得了不止一個建議)。

我在哪裏可以開始尋找糾正問題?

這裏是成功看起來像FF2在WinXP:

alt text

這裏就是失敗看起來像IE7:

alt text

回答

4

我最終實施的工作解決方案基於一遍又一遍讀取this explanation

在底層HTML中,所有藍色圓角元素都是DIV,它們都是兄弟(同一DIV的所有子項)。

自動完成div本身(這是圓角容器div的偉大的孫輩)的z-index可以是任意高的,並且它不會解決這個問題,因爲IE本質上是渲染整個搜索框內容低於「重要統計信息」框的全部內容,因爲兩者都有默認的z-index,而重要的統計信息是後面的在HTML中。

訣竅是爲每個這些兄弟DIV(藍色圓角容器)遞減z-索引,並將它們全部標記爲position:relative。因此,包含搜索框的藍色div是z-index:60,「Vital Stats」框是z-index:50,「Tags」是z-index:40,依此類推。

因此,更一般地說,找到重疊元素和重疊元素的共同祖先。在共同祖先的直接子代中,按照您希望內容顯示的順序應用z-index。

1

我不完全理解這是導致問題的原因,但您可能需要探索YUI Autocomplete對象的useIFrame屬性 - 它將iframe obj在自動填充字段下面,這允許字段然後浮動在IE的錯誤佈局中遮蔽它的對象上方。

http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame

但該文檔說,這個問題在5.5 < IE < 7,所以這可能不是你所遇到的問題。再次,如果您完全不瞭解您正在使用的設置,您可能還想嘗試使用各種z-index值來表示自動填充字段和周圍的塊級元素。

+0

謝謝,iframe技巧實際上已經解決了我在IE6中的一些問題,但似乎並沒有影響到這個問題。 – 2008-09-18 00:39:21

+0

對不起 - 你給Z指數財產去了嗎?根據我在回答後張貼的截圖,看起來情況可能如此。我認爲有一個用於IE的開發工具欄,可以讓你看到各種元素的Z-index ... – delfuego 2008-09-18 16:45:58

1

確保自動完成div的z-index比構成圓角框的div大一些。微軟把我所認爲的頂級元素的z-index值設爲20000或100000。也許明智的做同樣的事情。

5

傑里米,

對不起,這是這麼晚了,但希望的答案將在未來的項目中使用你的。

這裏的問題是IE在任何時候都有一個位置爲relative的元素時會創建一個新的堆棧順序,這意味着z-index本身並不是唯一的控制因素。你可以閱讀更多關於此這裏:相對於包裝你的整個自動完成執行(然後位置上的容器:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

爲了解決這個問題,如果我理解正確的問題,位置絕對適用到你的結果容器)。這應該在IE中爲那些允許它們浮動在另一個位置上的元素創建一個獨立的堆棧順序:稍後出現在頁面中的相對堆棧。

問候, 埃裏克

1

我有一個類似的問題這一點,我通過基本上只是改變的z-index爲不同的div固定它。只需按照應顯示的順序爲每個div設置更高的數字即可。