在CSS中,为什么多个元素上的"float:left; display:table; margin:x"的组合会使边距减少？

Question

在处理布局时,我决定尝试将主要列的基于浮动的布局与子元素的基于表的布局相结合.因此,我的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;
    /*  ...  */
}

具体的宽度和边距并不重要.有关参考示例,请参阅此jsFiddle.

我看到发生的事情是,每个列块在页面上从左到右,边距比上一个略小.由于没有额外的标记或CSS来实现这一点,我很困惑.在玩了不同的值之后,我发现注释display: table导致了我期望的正常行为,例如恒定的列宽.

现在,我可以使用替代方法来获得我想要的布局,这不是问题; 但我真的很好奇为什么会这样.有什么想法吗？

编辑

看起来这是一个webkit错误.display: table浮点数和边距在Firefox中运行良好.关于为后代修复webkit的任何建议？

进一步编辑

我刚刚在Safari中测试过它似乎也在那里工作.WTF Chrome ??

最终编辑

在Firefox 18,Safari和Chrome Canary(除标准Chrome之外)进行测试后,看起来这实际上是Chrome特有的错误.

最简单的解决方法是在每个被浮动的内容中添加一个简单的附加包装div以包含内容并将包装器的CSS设置为width: 100%; height:100%; display: table;,然后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

这不应该发生.块级表的水平边距应该与任何其他块级非替换元素的计算方式相同,如CSS2.1规范的第10.3.3节所述,无论使用哪种表格布局算法.特别是,边距的百分比值应根据您作为表格显示的元素的包含块的宽度来计算; 由于所有元素都是共享相同父元素和相同边距百分比值的兄弟元素,因此只要它们是浮动块框,它们应该是等距的.

在除谷歌浏览器之外的所有浏览器中,元素都是等距的,正如预期的那样.所以我最好的猜测是这是另一个Chrome bug.

如果您注释掉display: table声明 - 正如您所说的那样导致行为恢复正常 - 浏览器仍然会在您的浮点数中生成匿名块表框以包含表格单元格.这不应该对布局产生负面影响,但如果确实如此,我无法进一步评论,因为我并不熟悉表格布局在CSS方面的工作原理.