在沒有寬度的浮動div中浮動子項時Chrome和Firefox的不同渲染。

Question

我在這里設置了一個測試

http://jsfiddle.net/WZyF7/11/

Firefox似乎與Chrome和IE7-9的不同之處在於如何計算寬度。 它不是給內容提供所需的寬度，而是使div成為最廣泛的子元素。 這將元素垂直堆疊在FF中，而在其他瀏覽器中水平堆疊。

有沒有辦法讓所有瀏覽器以相同的方式處理它，而無需為父元素設置寬度或使用JS？ 有沒有人知道如何跨瀏覽器計算這個？ （寬度：自動;？）

Answer 1

相關規范位是http://www.w3.org/TR/CSS21/visuren.html#floats ，其中說：

表的邊框，塊級替換元素或正常流中建立新塊格式化上下文的元素（例如“溢出”除“可見”之外的元素）不得與邊框重疊。與元素本身相同的塊格式化上下文中的任何浮點數。 如果需要，實現應該通過將所述元素放置在任何前面的浮動下面來清除所述元素，但是如果有足夠的空間，可以將它放置在這些浮動的附近。 它們甚至可能使所述元素的邊框比第10.3.3節所定義的更窄。 CSS2沒有定義何時UA可以將所述元素放在浮點旁邊或者所述元素可能變得更窄。

http://www.w3.org/TR/CSS21/visudet.html#float-width中的部分說：

如果'width'計算為'auto'，則使用的值是“shrink-to-fit”寬度。

和以下。 請注意，這里重要的優選寬度的實際計算並不是那么明確。 所以基本上，在這種情況下，每個規范行為都是未定義的。

在任何情況下，這里發生的是Firefox正在提供overflow: hidden塊，它應該具有10.3.3節的寬度，然后通過浮動清除它，而Chrome和IE似乎采取“他們甚至可能”的路徑。 特別是，它假設在計算父級的首選寬度時會這樣做。

所有這一切，我認為Firefox的行為在這個特殊的狹窄情況下更為正確：你的“容器”是400px寬。 “父”具有20px的水平填充。 “浮動”是300px寬。 “內容”具有20px的水平填充。 這為“內容”中的文本留下了60px的寬度，但是最長的單詞（“available ...”）與我的字體大約相差70px。 例如，在Chrome中，“內容”適合“浮動”旁邊的唯一方式是因為“內容”的正確填充完全消失。 如果你給這里的“父”一個固定的寬度，Firefox會做同樣的事情....但是你強迫一個寬度，而不是要求瀏覽器通過收縮包裝算法選擇一個合理的寬度，當然。

這里你最好的選擇就是給“父”一個特定的寬度，如果你想讓它具有那個寬度，而不是依靠收縮包裝產生一個實際上對於內容來說太小的寬度。