11

在设计布局时，我决定尝试将主要列的基于浮动的布局与子元素的基于表格的布局结合起来。因此，我的 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 铬？？

最终编辑

在 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;
    /*  ...  */
}
4

1 回答 1

7

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

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

If you comment out the display: table declaration — which as you say causes the behavior to return to normal — browsers will still generate anonymous block table boxes within your floats to contain the table cells. This should not adversely affect the layout, but if it does, I can't comment further as I'm not intimately familiar with how table layout works in terms of CSS.

于 2013-02-18T18:51:12.213 回答