例如，我遇到这样的情况(人为)，例如：

<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"和"＃inner2"彼此相邻出现，然后"＃inner3"环绕到下一行。

在发生这种情况的实际页面中，还有很多事情要做，但是我已经用Firebug非常仔细地检查了所有元素，并且不明白为什么＃inner3元素没有出现在与＃inner1相同的行上和＃inner2并导致＃outer`变宽。

因此，我的问题是：有没有办法确定浏览器为何按#outs的大小调整它的大小，或者为什么它有选择地包装＃inner3，即使有足够的空间将其放在前一行"？除了针对此问题的特定解决方案之外，我们顽固的HTML / CSS / Web UI专家对那些发现自己在前端工作的贫穷后端开发人员有哪些技巧或者技巧？

解决方案

回答

试用适用于Firefox的Web开发人员插件。具体来说，信息->显示块大小和轮廓->轮廓块级别元素选项。这将允许我们查看元素的边框及其大小，就像Firefox看到的一样。

回答

在Firebug的CSS标签中，我们可以看到哪些样式规则按级联顺序应用于选定的元素。这可能会也可能不会解决问题。

我的猜测是，有关＃inner3内容的某些内容导致其包装在第一行下方，并且#outer的大小正好适合较小的所需空间。

回答

因此，我在我的特定情况下找到了答案-在DOM的更远处有一个div，它设置了特定的左/右边界以压缩它及其中的所有内容。

但是，问题的核心实际上是如何轻松调试此类问题？例如，在这种情况下，最理想的是Firebug中的某些东西，当将鼠标悬停在布局面板中的某个元素的大小上时，会显示一个工具提示，上面写着"宽度受外部元素X约束；高度受样式Z约束Q"或者"内部元素A，B和C贡献的宽度"。

我希望我有时间编写这样的内容，尽管我怀疑很难(即使不是不可能)从Firefox的渲染引擎中获取这些信息。

回答

拥有一个可以准确告诉我们所有布局问题的工具会很好，但是在这种情况下，浏览器精确地呈现了页面应具有的样式-浮点的总宽度超过了包含块的宽度，因此最后一个下降到新行(这与IE6扩展框/浮动下降问题略有不同，该问题通常是由浮动内容而不是浮动本身引起的)。因此，在这种情况下，页面没有任何问题。

只需在Firebug中遍历HTML并弄清楚一个块的哪个子代超出块的宽度，就可以对此进行调试。 Firebug为此提供了很多信息，尽管有时我需要使用计算器。我认为我们所描述的关于能够看到哪些元素会约束其他元素的事情太复杂且不堪重负，尤其是对于从正常流中删除的元素(例如浮标或者定位的元素)而言。

另外，更深入地了解CSS布局也有很大帮助。它可能变得非常复杂。

例如，通常建议为浮动元素分配显式宽度-W3C CSS2规范指出，浮动必须具有显式宽度，并且不提供没有该宽度的操作说明。我认为大多数现代浏览器都使用"缩小以适合"方法，并将自己限制在内容的宽度上。但是，这在较旧的浏览器中无法得到保证，在3列布局之类的东西中，我们会受到浮动内容宽度的限制。

另外，如果我们正在努力寻求IE6兼容性，那么还有许多与浮动相关的错误，这些错误也可能导致类似的问题。