为什么overflow-x为我的div添加填充？

Question

我有一个设置，其中block - 显示div包含inline-block - 以水平方式显示div。但是，如果屏幕很窄，我不希望每个div中的文字溢出，从而破坏其右侧的div。

但是，当我向overflow-x: hidden添加inline-block时，它会在block div的底部添加填充。

请注意，在顶行中，灰色框如何在较暗的框下方延伸，而在底部，它们排成一行？ 仅的区别在于第二行没有设置overflow-x属性。

我在Chrome 39，Chrome 40和IE 11上测试了这个。这似乎是理想的行为，但我不想要它。我也不想在div s上设置严格的高度。

为什么在使用overflow时会添加此填充，我该如何摆脱它？

jsFiddle

实际代码

HTML

<div id="row1">
    <div class="cell">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div class="cell">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div class="cell">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>
<br/><br/>
<div id="row2">
    <div class="cell">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div class="cell">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div class="cell">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>

CSS：

#row1, #row2 {
    background: #ddd;
    width: 100%;
}

.cell {
    display: inline-block;
    background: #bbb;
    padding: 6px;
    white-space: nowrap;
    width: 30%;
}

#row1 .cell {
    overflow-x: hidden;
}

Answer 1

来自CSS 2.1 spec：

  

'内联块'的基线是其最后一个线框的基线   在正常流程中，除非它没有流入线框或如果   它的'overflow'属性有一个除'visible'以外的计算值   在哪种情况下，基线是底部边缘边缘。

因此，当您添加overflow-x:hidden，overflow（overflow-x和overflow-y的速记属性时，不再具有“可见”的计算值。因此，内联块从其内部线框给出的基线变为其底线是底部边缘边缘。

这意味着底部边缘边缘与内嵌块元素所在的线框的strut的基线对齐，这意味着必须增加线框的高度以允许空间支柱的下降。

您可以通过将内联框的vertical-align设置为top来消除此问题，以便它们的底部不必与支柱的基线对齐，并且支柱将向上移动到不要在行框中占用任何额外的空间。

请参阅http://jsfiddle.net/y4t29uwj/2/

Answer 2

奇怪......我不知道为什么会这样。如果它可以帮助你：

• 在Safari Mac上，未添加填充。
• 将line-height: 0.5;添加到#row1, #row2 {...}，在Chrome Mac上为我删除了填充。