例如，我有一种情况，我有这样的（人为的）例子：
<div id="outer" style="margin: auto>
<div id="inner1" style="float: left">content</div>
<div id="inner2" style="float: left">content</div>
<div id="inner3" style="float: left">content</div>
<br style="clear: both"/>
</div>
在任何元素上都没有设置宽度，我想要的是#inner1，#inner2和#inner3在#outer内水平相邻显示但是正在发生的是#inner1和#inner2彼此相邻，然后#inner3正在回到下一行。
在发生这种情况的实际页面中还有很多内容，但我已经使用Firebug非常仔细地检查了所有元素，并且不明白为什么#inner3元素没有出现在同一行作为#inner1和#inner2并导致#outer变宽。
所以，我的问题是：有没有办法确定为什么浏览器调整#outer的大小，或者为什么它选择包裹#inner3即使有有足够的空间把它放在以前的“线”上吗？针对这个问题的特定解决方案，你有什么技巧或技巧可以让HTML / CSS / Web UI人员为一个发现自己在前端工作的可怜的后端开发人员提供支持？
答案 0 :(得分：4)
有一个工具能够准确地告诉你所有的布局问题是很好的，但是在这种情况下，浏览器会精确地呈现页面应该具有的内容 - 浮动的组合宽度超过了包含块，所以最后一个下降到一个新行（这与IE6扩展框/浮点丢弃问题略有不同，这通常是由浮点内的内容引起的，而不是浮点数本身）。所以在这种情况下，你的页面没有任何问题。
调试这只是在Firebug中浏览HTML并确定块中哪些子块超出块宽度的问题。 Firebug为此目的提供了大量信息，但有时我需要使用计算器。我认为你所描述的能够看到哪些元素约束其他元素会简单地过于复杂和压倒性，特别是对于从正常流程中移除的元素（例如浮点数或定位元素）。
此外，更深入地了解CSS布局如何帮助很多。它会变得非常复杂。
例如，通常建议为浮动元素指定显式宽度 - W3C CSS2规范指出浮点数需要具有显式宽度，并且不提供没有它的指令。我认为大多数现代浏览器使用“缩小到适合”方法，并将自己约束到内容的宽度。但是，在旧版浏览器中无法保证这一点，并且在3列布局中，您将受到浮动内容宽度的限制。
此外，如果您正在努力争取IE6兼容性，那么有许多float related bugs也可能导致类似的问题。
答案 1 :(得分：2)
尝试Firefox的Web Developer Plugin。具体来说，信息 - ＆gt;显示块大小和大纲 - ＆gt;大纲块级元素选项。这样可以查看元素的边框以及Firefox看到的大小。
答案 2 :(得分：0)
在Firebug的CSS选项卡中，您可以看到哪些样式规则适用于级联顺序中的选定元素。这可能会或可能不会帮助您解决问题。
我的猜测是关于＃inner3的内容导致它包裹在第一行之下，而#outer的大小正在调整以适应所需的较小空间。
答案 3 :(得分：0)
所以我在我的特定情况下找到了答案 - 在DOM中有一个div，它具有特定的左/右边距设置，用于压缩它及其中的所有内容。
但问题的核心是如何轻松调试此类问题？例如，在这种情况下，在Firebug中会有什么东西，当在布局面板中悬停在元素的大小上时，会显示一个工具提示，其内容类似于“外部元素X约束的宽度;高度受元素上的样式Z约束” Q“或”宽度由内部元素A，B和C贡献“。
我希望我有时间写这样的东西，虽然我怀疑从Firefox的渲染引擎中获取这些信息会很困难（如果不是不可能的话）。