IE9 CSS浮動：左右推內容下降

我在IE9中處理CSS float時遇到問題。查看partycypacjaobywatelska.pl。在Firefox，Chrome，Opera等主頁面正確顯示，而IE9在頁眉和其他內容之間顯示空白區域。IE9 CSS浮動：左右推內容下降

這個空間由左類和右兩個元素（他們的地方在DOM：body - >#wrapper - >#container - >.left，.right）觸發。他們分別設置了float: left和float: right，但是，在IE9中，他們推低了.middle。設置display: none對他們有幫助，但我不完全控制這些div何時獲得內容，因此對我來說這不是一個可行的解決方案。

我試圖創建一個最小的例子，但this jsFiddle在IE9中正常工作。任何想法可能會觸發該錯誤？

感謝您的幫助。

來源

2012-09-05 mgol

不知道是什麼問題 - 超級奇怪。如果你在.middle上拋出clear：none，會發生什麼？或者在.middle上設置一個高度？ – alexvance

設置'height'不會改變，同時增加'clear：none'會將'.middle'推下。如果你進入IE9的DOM Inspector並點擊'.middle'節點，你會發現'.middle'實際上並沒有被壓下，由於這些浮動，它變得更窄了。然後，'.middle'裏面的'.jimgMenu'的寬度要大得多，並且會被壓下。如果我在'midmid'上設置了'clear：both'，那麼'.middle'也會被壓下（但是仍然保持其較短的寬度......怪異）。在Chrome/Firefox中，「.middle」的寬度比IE9大得多（它與'.left'和'.right'重疊，而不是IE9，它們並排）。 – mgol

好的，我的解決方法是確保佈局中'.left'和'.right'內沒有空格，''.left：empty'和'.right：empty'設置爲'display：none'。奇蹟般有效。 – mgol

使用IE的開發工具，.middle實際上並未被推送，它是它內部的.jimgMenu。如果你刪除溢出：隱藏在那，那麼你可以看到IE9和Firefox的行爲一樣。這絕對是漂浮在內容區域的花車。你是否嘗試過使用clearfix而不是使用溢出？

老實說，那些.left和.right應該可以被絕對定位，如果它們被粘在邊上那樣的話。他們甚至包含什麼？他們爲什麼假設在內容後面漂浮？這可能不是構建HTML的最佳方式。

來源

2012-09-05 17:16:21 Brian

是的，我不會使用自己的花車。我沒有創建這個網站，我只是「從其他人那裏」繼承了它，而且我必須把它整理好。最初它甚至錯過了任何DOCTYPE ... 禁用「overflow：hidden」將需要我將它們的位置改變爲絕對位置，並將'.middle'放置在不同的位置。 TBH我有點害怕在佈局中改變太多，因爲我不知道在這個代碼中隱藏着什麼野龍，等着咬我。我只是不明白爲什麼IE9在這裏的表現與世界其他地方不一樣，有什麼想法？ – mgol

此外，請參閱我對我的問題的評論，我描述了我在DOM Inspector中發現的內容等。 – mgol

啊，有一句話 - '.left'和'.right'必須靜態或相對定位，因爲它們可能比中間和頁腳需要在它們下面; '.middle'是這裏奇怪的定位元素。 – mgol

IE9 CSS浮動：左右推內容下降

回答

相關問題