溢出的CSS对齐问题和溢出的内联对象：隐藏答案

【问题标题】：css alignment issue with overflow and inlined objects with overflow:hidden溢出的CSS对齐问题和溢出的内联对象：隐藏
【发布时间】：2012-01-06 21:31:24
【问题描述】：

我想要一个带有溢出：隐藏的 div display:inline-block。我的问题是 overflow:hidden 会向下推相邻的 inline-block 元素。

演示： http://jsfiddle.net/vNDmX/

谁能解释为什么会发生这种情况，我该如何解决？

更新：这是 Firefox 特有的问题。 float:left 有点作用，但它仍然与间距混淆：http://jsfiddle.net/vNDmX/3/。

【问题讨论】：

您发布的演示没有说明问题。
是的，这似乎是 Firefox 特有的问题。该死的。
float:left 而不是 inline:block 工作正常。
为什么不把 inline-block 改成display:block; float:left;？
float:left 有效也无效。见：jsfiddle.net/vNDmX/3。它仍然与间距混淆。

标签： html css

【解决方案1】：

这是一个 Firefox 特有的错误（这是我在调查此问题时发现的 a related question）。修复似乎是设置vertical-align: top。

这是一个修复示例，以及为显示元素添加的一些边框：

http://jsfiddle.net/vNDmX/5/

button {
    vertical-align: top;
}

【讨论】：

这正是我想要的。如果我能给你+10，我会的！谢谢m8！
@Blazes 对于其他各种布局问题，在使用display: inline-block; 时，您几乎应该始终使用vertical-align: top;。
Chrome 也有这种情况。

【解决方案2】：

试试浮动：

HTML5：

<!DOCTYPE HTML>
<html lang="en">
    <head></head>
    <body>
        <button id="button1">Button1</button>
        <button id="button2">Button2</button>
    </body>
</html>

Javascript：

$(document).ready(function(){
    var wrapper = '<div style="display:block;float:left;" />';
    $('#button1').wrap(wrapper);
});

【讨论】：

已更改，不便之处敬请谅解。

【解决方案3】：

看起来好像在div 上设置溢出会导致它失去对基线位置的跟踪。它的基线应该是button 的基线，但它是button 的底部。这意味着第二个button 尝试将其基线对齐到错误的位置。解决此问题的一种方法是在div 上使用vertical-align: bottom;。

【讨论】：