jQuery動畫寬度的div與絕對父

Question

我想動畫的寬度div這是由父母元素定位absolute它的父母。通過顯示example of what I mean可能更容易解釋。

應該發生的事情是，當點擊紅色矩形時，綠色框的寬度會動畫到一定的寬度，而紅色矩形則會與其相鄰。 IEFirefox這一切都很好，但是當它在鉻中運行時，紅色矩形跳到綠色框下方。所以我只是想知道我是否做了一些愚蠢的事情，或者如果有人知道我可能做錯了什麼？

感謝，

Answer 1

沒有錯，它只是瀏覽器認爲還有下一個被顯示給對方:)這兩個元素沒有足夠的自由空間

#banner-wrapper { 
    min-width: 100%; 
} 

小提琴鏈接：http://jsfiddle.net/K2UbQ/8/

Answer 2

問題是由於瀏覽器認爲容器div不夠大而不能包含這兩個元素而引起的。這是由你的絕對定位造成的。如果您必須爲此使用絕對定位，則需要確保div＃banner-wrapper足夠大以適應內容的增長。

您可以在CSS中按照x10的說法強制div的寬度，或者在click處理程序中使用JavaScript更改其寬度，以便只在需要時纔打開它。

Answer 3

如果您在#banner-wrapper周圍放置邊框，您將看到會發生什麼情況。

它看起來像Chrome不重新大小，一旦其內容的元素改變大小（，因此它會導致浮動元素打破，因爲他們不單行適合）..

替代將使用display:inline-block作爲內部元素。

例子：http://jsfiddle.net/K2UbQ/10/