Question

我想有一个div显示：带溢出的内联块：隐藏。我的问题是overflow：hidden会压下相邻的内联块元素。

任何人都可以解释为什么会发生这种情况，我该如何解决？

更新：这是一个特定于Firefox的问题。 float：left稍微有效，但它仍然是间距：http://jsfiddle.net/vNDmX/3/。

Answer 1

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

以下是修复的示例，以及为展示元素添加的一些边框：

button {
    vertical-align: top;
}

Answer 2

尝试使用float：

<强> 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);
});

Answer 3

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

带溢出的css对齐问题和带溢出的内联对象：隐藏

3 个答案: