我在这里设置了一个测试
Firefox 在如何计算宽度方面似乎与 Chrome 和 IE7-9 不同。它不是为内容提供所需的宽度，而是使 div 成为最宽的子元素。这在 FF 中垂直堆叠元素，而在其他浏览器中水平堆叠。
有没有办法让所有浏览器都以相同的方式处理这个问题，而无需为父元素设置宽度或使用 JS？有没有人知道这是如何跨浏览器计算的？（宽度：自动；？）
问问题
4328 次
1 回答
1
相关的规范位是http://www.w3.org/TR/CSS21/visuren.html#floats它说：
表格的边框框、块级替换元素或正常流中建立新块格式上下文的元素（例如具有“溢出”而不是“可见”的元素）不得与边缘框重叠any 浮动在与元素本身相同的块格式化上下文中。如有必要，实现应通过将其放置在任何先前的浮动下方来清除所述元素，但如果有足够的空间，可以将其放置在此类浮动附近。他们甚至可以使所述元素的边框比第 10.3.3 节定义的更窄。CSS2 没有定义 UA 何时可以将所述元素放在浮动旁边，或者所述元素可以变窄多少。
http://www.w3.org/TR/CSS21/visudet.html#float-width中的部分说：
如果 'width' 计算为 'auto'，则使用的值是“shrink-to-fit”宽度。
和以下。请注意，此处重要的首选宽度的实际计算并未完全定义好。所以基本上，在这种情况下，每个规范的行为是未定义的。
无论如何，这里发生的情况是 Firefoxoverflow: hidden按照第 10.3.3 节为该块提供了它应该具有的宽度，然后将其清除到浮动之外，而 Chrome 和 IE 似乎采取了“他们可能会”的路径。特别是，它假设它会在计算父级的首选宽度时这样做。
综上所述，我认为 Firefox 的行为在这种特殊的狭窄情况下更正确：你的“容器”是 400px 宽。“父”有 20px 的水平填充。“浮动”是 300px 宽。“内容”有 20px 的水平填充。这为“内容”内的文本留下了 60 像素的宽度，但最长的单词（“可用...”）在我的字体中大约是 70 像素宽。例如，在 Chrome 中，“内容”与“浮动”相邻的唯一方法是因为“内容”的右侧填充完全消失了。如果你在这里给“父级”一个固定的宽度，Firefox 会做同样的事情......但是你是在强制一个宽度，而不是要求浏览器通过收缩包装算法选择一个合理的宽度，当然.
如果您希望它具有该宽度，您最好的选择是只给“父”一个特定的宽度，而不是依靠收缩包装来产生一个实际上对于内容来说太小的宽度。
于 2012-10-15T14:16:25.800 回答