javascript - css overflow hidden 增加了容器的高度

Question

请看一下这个 fiddle - http://jsfiddle.net/Z27hC/

var container = document.createElement('span');
container.style.display = 'inline-block';
container.style.marginTop = '10px';
container.style.marginLeft = '50px';
container.style.background = 'lightblue';
document.body.appendChild(container);

var cell = document.createElement('span');
cell.style.display = 'inline-block';
cell.style.border = ' 2px solid black';
cell.style.width = '200px';
cell.style.height = '16px';
cell.style.overflow = 'hidden';
container.appendChild(cell);

var text_node = document.createTextNode('hallo');
cell.appendChild(text_node);

我有一个容器，包含一个单元格，包含一个文本节点。单元格具有固定宽度。

如果传递给文本节点的文本超过宽度，我希望它被 chop ，所以我将单元格设置为'overflow: hidden'。

它有效，但它会导致单元格的高度增加 3px。单元格有边框，但增加的高度出现在边框下方，而不是边框​​内部。

因为我在电子表格样式中有很多单元格，所以布局很乱。

我在 IE8 和 Chrome 上测试过，结果相同。

以下任何一种解决方案都可以-

• 防止长高的发生
• 将增加的高度保持在边框内
• 另一种 chop 文本的方法

根据要求，这是一个显示更完整示例的新 fiddle 。

http://jsfiddle.net/frankmillman/fA3wy/

我希望它是不言自明的。如果您需要更详细的解释，请告诉我。

这是(希望如此)我最后的 fiddle -

http://jsfiddle.net/frankmillman/RZQQ8/

它融合了所有响应者的想法，现在可以按照我的意愿工作。

主要有两个变化。

第一个的灵感来自 Mathias 的表格解决方案。我现在不再使用包含一个空白行和一个数据行(其中一个隐藏一个显示)的中间容器，而是在顶层容器中交替使用空白行和数据行。我不认为它影响了我的布局问题，但它切掉了一层并简化了代码。

所有响应者建议的第二个更改实际上解决了问题。我现在使用“div”和“向左浮动”和“向右浮动”的谨慎组合来实现我想要的布局，而不是让类型为“span”的元素显示为“inline-block”。

非常感谢大家。

Answer 1

让我向您解释为什么会这样。

根据 CSS 2.1 Specs ,

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

用简单的话来解释，

i) 如果有问题的内联 block 将其溢出属性设置为可见(默认情况下无需设置)。那么它的基线就是该行包含 block 的基线。ii) 如果有问题的内联 block 将其溢出属性设置为 OTHER THAN visible。然后它的底边距将在包含框线的基线上。

因此，在您的情况下，内联 block cell 具有 overflow:hidden(不可见)，因此它的边距底部是 cell< 的边框 位于容器元素 container 的基线处。

这就是为什么元素 cell 看起来被向上推并且 container 的高度看起来增加了。您可以通过将 cell 设置为 display:block 来避免这种情况。