html - CSS中，为什么 "float: left; display:table; margin: x"在多个元素上的组合会让边距变小？

Question

在设计布局时，我决定尝试将主要列的基于 float 的布局与子元素的基于表格的布局相结合。因此，我的 html/css 标记是沿着这些线的:

HTML:

<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
...

CSS:

.column {
    float: left;
    display: table;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

具体的宽度和边距并不重要。参见 this jsFiddle作为引用示例。

我看到发生的情况是，从左到右穿过页面的每个列 block 的边距都比上一个略小。由于没有额外的标记或 CSS 来实现这一点，我感到很困惑。在尝试了不同的值之后，我发现注释掉 display: table 导致了我预期的正常行为，例如恒定的列宽。

现在，我可以使用其他方法来获得我想要的布局，这不是问题；但我真的很好奇为什么会这样。有什么想法吗？

编辑

看起来这是一个 webkit 错误。 display: table 带有 float 和边距，在 Firefox 中运行良好。关于为后代修复 webkit 有什么建议吗？

进一步编辑

我刚刚在 Safari 中进行了测试，它似乎也可以在那里工作。 WTF Chrome??

最终编辑

在 Firefox 18、Safari 和 Chrome Canary(以及标准 Chrome)中进行测试后，看来这实际上是一个 Chrome 特定的错误。

最简单的解决方法是在每个 float 的 div 中添加一个简单的附加包装 div 以包含内容，并将包装的 CSS 设置为 width: 100%;高度:100%； display: table;，然后从 float 的外部元素中删除 display: table。就像一个魅力。

http://jsfiddle.net/XMXuc/8/

HTML:

<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
...

CSS:

.column {
    float: left;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element-wrapper {
    width: 100%;
    height: 100%;
    display: table;
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

Answer 1

这不应该发生。 block 级表的水平边距的计算方式应与任何其他 block 级非替换元素相同，如 section 10.3.3 中所述。 CSS2.1 规范，不管 which table layout algorithm is used .特别是，percentages values for margins应根据显示为表格的元素的包含 block 的宽度进行计算；由于您的所有元素都是共享相同父元素和相同边距百分比值的兄弟元素，因此只要它们是 float block 框，它们就应该等距。

在除 Google Chrome 之外的所有浏览器中，元素 正如预期的那样是等距的。所以我最好的猜测是这是另一个 Chrome 错误。

如果您注释掉 display: table 声明——如您所说，这会导致行为恢复正常——浏览器仍会在您的 float 内生成匿名 block 表框包含表格单元格。这不应该对布局产生不利影响，但如果确实如此，我无法进一步评论，因为我不太熟悉表格布局在 CSS 方面的工作原理。