在没有宽度的浮动 div 中浮动子元素时，与 Chrome 和 Firefox 的渲染不同。答案

【问题标题】：Different rendering from Chrome and Firefox when having floated children in a floated div with no width.在没有宽度的浮动 div 中浮动子元素时，与 Chrome 和 Firefox 的渲染不同。
【发布时间】：2012-10-04 02:49:02
【问题描述】：

我在这里设置了一个测试

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

Firefox 在如何计算宽度方面似乎与 Chrome 和 IE7-9 不同。它不是为内容提供所需的宽度，而是使 div 成为最宽的子元素。这会在 FF 中垂直堆叠元素，而在其他浏览器中水平堆叠。

有没有什么方法可以让所有浏览器都以相同的方式处理这个问题，而无需为父元素设置宽度或使用 JS？有没有人知道这是如何跨浏览器计算的？（宽度：自动；？）

【问题讨论】：

“有没有人有信息...”我发现了这个：w3.org/TR/CSS21/visudet.html#float-width，但它对我来说要么含糊不清，要么令人困惑。
如果您检查this CSS positioning tutorial 的第 8 步，您将看到它在 Firefox 中正常工作。如果没有人提供具体的解决方案，也许您可以看看这个并弄清楚发生了什么？
如果您的意图是让.parent div 填写到.container 的 100%，那么您规定不将width:100% 放在.parent 上的原因是什么？如果它提供了跨浏览器的支持，那么显式会不会很痛苦？

标签： css internet-explorer firefox google-chrome cross-browser

【解决方案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 的行为在这种特殊的狭窄情况下更正确：你的“容器”是 400 像素宽。 “父”有 20px 的水平填充。 “浮动”是 300px 宽。 “内容”有 20px 的水平填充。这为“内容”内的文本留下了 60 像素的宽度，但最长的单词（“可用...”）在我的字体中大约是 70 像素宽。例如，在 Chrome 中，“内容”与“浮动”相邻的唯一方法是因为“内容”的右侧填充完全消失了。如果你在这里给“父”一个固定的宽度，Firefox 会做同样的事情......但是你是在强制一个宽度，而不是要求浏览器通过收缩包装算法选择一个合理的宽度，当然.

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

【讨论】：