重疊元素停止類變化

在IE7重疊在此頁面 http://zenchan.com/program/重疊元素停止類變化

當我從頂部翻轉右框中2，突然重疊（負餘量消失）。發生的事情是，一個'懸停'類被添加到移動背景精靈。

兩個黃色框正在調試：如果懸停類預先放好，則沒有問題。所以從根本上來說，CSS對於IE7來說不是問題，但是添加類是。

任何想法是什麼造成這一點。我已經嘗試將haslayout添加到各種元素，但影響不大。

編輯：我找到了解決辦法。使用min-height：10px將hasLayout應用於周圍的元素。

2010-04-05 Gazzer

看着標記，我認爲你應該嘗試添加一個div來包圍div的每一行。你正在將元素浮動到左邊，而且下面沒有任何元素用clear：both;值集。例如：

<div id="row1" class="rowWrapper"> 
    <div id="program-dayoutdoor" class="program-wrapper"> 
     CONTENT 
    </div> 
    <div id="program-daycamp" class="program-wrapper"> 
     CONTENT 
    </div> 
</div>

然後在你的CSS，你將需要一個類似風格以下

.rowWrapper { 
    clear: both; 
    height: WHATEVER_HEIGHT_YOU_NEED_PER_A_ROW 
}

林不積極，這將解決您的問題，但它是一個開始。這樣做的目的是確保每當事情發生變化時，這些行不會試圖將自己壓在彼此之上。

此外，請確保兩個類的大小是相同的，這顯然會產生影響。

希望這有助於

都市報

編輯

好吧，我想我看到你的問題。開始你的CSS有這樣這些元素

body.page-slug-program div#program-daycamp { 
    background-position:0 -141px; 
    margin-left:-32px; 
}

但是，onHover選項的保證金左會消失和背景位置= -390px -341px; 這意味着您的CSS必須在兩者之間的某處進行更改。

來源

2010-04-05 19:45:48 Metropolis

我更喜歡找到一個不涉及添加額外HTML的解決方案。 CSS（你的編輯）不是問題。 .hover CSS沒有餘裕，但由於特殊性規則，＃program-daycamp的餘裕仍然會被應用。（我曾嘗試在.hover類中留下冗餘餘量，但沒有改變）。 – Gazzer 2010-04-06 13:09:54

「我更喜歡找到一個不涉及添加額外HTML的解決方案」如果您打算成爲浮動元素，那麼這將更好地防範問題。最好有一個明確的要素：兩個屬性，以確保事情保持在你認爲他們應該的地方。 – Metropolis 2010-04-06 14:04:08

（我發現了一個解決方案，見上面）我發現我不再需要擔心清除元素。我只是將溢出：自動應用到周圍的元素，所有工作。 – Gazzer 2010-04-06 15:02:54

重疊元素停止類變化

回答

相關問題