IE9負頂部邊緣 - 浮動和清除的孩子使元素卡住

-2

我在IE9遇到了一個奇怪的問題，花了很多時間跟蹤和再現它。IE9負頂部邊緣 - 浮動和清除的孩子使元素卡住

因此，我們有以下標記：

<div class="container"> 
    <div class="movable"> 
     <div class="stuff">Stuff</div> 
     <div class="stuff special">Stuff Special</div> 
     <div class="stuff">Stuff</div> 
     <div class="stuff">Stuff</div> 
    </div> 
</div>

這導致這樣的事情：

The boxes before tinkering

我們想移動的黃色框起來（從容器中）和使.stuff元素清除。我們想漂浮至少一個.stuff元素，我們選擇.special，所以我們這樣做：

.movable { margin-top: -70px; } 
.stuff { clear: both; } 
.special { float: left; }

在左邊，結果我們得到的Chrome和Firefox，右側IE9：

Left: Chrome, Right: IE9

正如你所看到的，IE9由於某種原因卡住施加負margin-top，它總是會被卡住在右側或左側float和clear: both;上同時應用的元素。這兩個屬性的組合是必要的，只有其中一個不會觸發這種行爲。

A jsFiddle that demonstrates the problem and can be played with

這個問題已經出現在一個相當大的應用程序，因爲某些原因，我不能使用top代替margin-top，定位會破壞其他的東西。

有人有什麼想法如何幫助IE9正確顯示這個？

來源

2013-04-30 kapa

是否使用的是IE9的顛覆？ – vbence 2013-04-30 18:02:39

版本：9.0.8112.16421，更新版本：9.0.15 – kapa 2013-04-30 18:04:05

在同一元素上應用清除和浮點操作是非常直觀的。漂浮後清除漂浮物。 – albert 2013-04-30 21:37:53

清除.movable element。我不知道你通常是怎麼做的，添加一個clearfix類等等。如果不是的話，只需要添加overflow:hidden即可。浮動它也修復它，但這可能不適合你的真實頁面。

.movable { margin-top: -70px; overflow:hidden; }

jsFiddle

來源

2013-04-30 20:48:54 nomve

我還沒有忘記，演示的主要內容是你可以用Toggle按鈕自己添加/刪除它:)。浮動元素本身被以下元素清除，您是否可以創建您的建議解決方案的工作演示？ – kapa 2013-04-30 21:34:00

http://jsfiddle.net/6Phx6/13/ 對不起，沒有注意到:)。我會建議以更合適的方式清除它，但這並不重要。就像我說的，你也可以浮動它。 – nomve 2013-04-30 21:44:32

恩，這很有趣。這確實是一個有用的解決方法，即使這裏不需要clearfix。責備IE ...請清理你的答案，添加小提琴和一個代碼示例（爲將來可能的訪問者），我會接受它。感謝你的回答。 – kapa 2013-04-30 22:01:57

IE9負頂部邊緣 - 浮動和清除的孩子使元素卡住

回答

相關問題