我在这里设置了一个测试
Firefox似乎与Chrome和IE7-9的不同之处在于如何计算宽度。它不是给内容提供所需的宽度，而是使div成为最广泛的子元素。这将元素垂直堆叠在FF中，而在其他浏览器中水平堆叠。
有没有办法让所有浏览器以相同的方式处理它，而无需为父元素设置宽度或使用JS？有没有人知道如何跨浏览器计算这个？ （宽度：自动;？）
答案 0 :(得分：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会做同样的事情....但是你强迫一个宽度，而不是要求浏览器通过收缩包装算法选择一个合理的宽度，当然
这里最好的选择是，如果你希望它具有那个宽度，只要给“父”一个特定的宽度，而不是依靠收缩包装来产生实际上对于内容来说太小的宽度。