css - 当在没有宽度的 float div 中 float 子项时，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它说:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

以及http://www.w3.org/TR/CSS21/visudet.html#float-width中的部分其中说:

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

和以下。请注意，此处重要的首选宽度的实际计算并不是那么明确。所以基本上，这种情况下的规范行为是未定义的。

无论如何，这里发生的事情是 Firefox 为 overflow: hidden block 提供了它应具有的宽度(根据第 10.3.3 节)，然后将其清除超过 float ，而 Chrome 和 IE 似乎走“他们甚至可能”的道路。特别是，它假设在计算父级的首选宽度时会这样做。

总而言之，我认为 Firefox 的行为在这种特定的狭窄情况下更为正确:您的“容器”宽度为 400 像素。 “父级”有 20px 的水平填充。 “ float ”宽度为 300 像素。 “内容”有 20px 的水平填充。这为“内容”中的文本留下了 60px 的宽度，但最长的单词(“available...”)与我的字体相比约为 70px 宽。例如，在 Chrome 中，“内容”与“ float ”相邻的唯一方式是因为“内容”的右侧填充完全消失了。如果你在这里给“父”一个固定的宽度，Firefox 会做同样的事情......但是你强制一个宽度，而不是要求浏览器通过收缩包装算法选择一个合理的宽度，当然.

如果您希望“父级”具有该宽度，最好的选择是只给它一个特定的宽度，而不是依靠收缩包装来产生实际上对于内容来说太小的宽度。