如何使用溢出清除内联块元素的底部边距：隐藏？

Question

我知道，当 inline-block 元素的 overflow 属性的计算值不同于 visible 时，它的基线是底部边距边缘。

通过单击切换按钮将overflow:hidden 添加到div 元素，在此fiddle 中查看实际情况。 div 的基线将与其底部边缘对齐，在其下方生成一些空白/边距。

answer 很好地解释了这种行为。

我的问题是，我该如何“修复”它，以便在元素收到overflow:hidden 时不会出现边距？

我能想到的合乎逻辑的解决方法是将div 的vertical-align（默认为baseline）更改为其他内容。但我无法确定哪个 vertical-align 最合适：

• top 目前似乎在 Chrome 33 中存在问题，该元素的所有直接子元素（文本节点和 inline-block/replaced 内容）都与 div 的顶部边缘对齐。

• bottom 将是另一种选择，但 div 在使用 jQuery 为其height/vertical padding 设置动画时会稍微向上/向下移动。

• middle 就我的测试而言似乎工作正常，但我不确定浏览器是如何计算结果对齐的。

我还发现了其他 hack，例如在父级中应用 line-height:0 或 font-size:1px 并将所有子级包装在一个容器中，该容器会重置其 line-height/font-size，但这些都是非常丑陋的 hack。

vertical-align 的正确值是多少，或者此用例的正确修复方法是什么？

更新： middle 显然会将 inline-block 元素与行框的中间对齐。到目前为止，从我的测试来看，似乎只要元素的底部边缘高于基线，动画height 就不会出现闪烁问题。演示text-align bottom/text-bottom 发生的闪烁问题（注意顶部边框和文本）：demo

所以middle 或text-top（为了安全起见）的vertical-align 似乎工作正常（避免top 由于Chrome 错误）。我仍然愿意提供见解。

---

上下文：我正在使用 jQuery 为 inline-block 元素设置动画。 jQuery 的动画（fadeIn/fadeOut/slideUp/slideDown/animate/etc）在动画时在元素中设置overflow:hidden，导致整个页面低于动画@ 987654369@ 元素在动画期间被略微向下推。

这是另一个 demo 说明上面的段落。

---

SSCCE 中使用的代码：

Demo #1:

<div>
    some text and an inline block element <span></span>
</div>
<br>
<button>
    toggle overflow hidden
</button>

$('button').click(function() {
    var st = $('div')[0].style;
    st.overflow = !st.overflow ? 'hidden' : '';
});

span {
    display: inline-block;
    width: 10px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
}

Demo #2:

<div>
    some text and an inline block element <span></span>
</div>
<br>
<button>
    Animate for 1 second
</button>

$('button').click(function() {
    $('div').animate({ width: 300 }, 1000);
});

（与 Demo #1 相同的 CSS）

Demo #3 在动画height 时闪烁，因为vertical-align: bottom：

baseline
<div>
    some text and an inline block element <span></span>
</div>
<br>
<button>
    Animate for 2 seconds
</button>

var i = 0;
$('button').click(function() {
    $('div').animate({ height: ++i % 2 ? 300 : 100 }, 2000);
});

span {
    display: inline-block;
    width: 10px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
    border: solid;
    vertical-align: bottom;
}

Answer 1

您可以用负边距取消扩展基线周围的“额外”高度，但这将取决于父级的line-height。默认情况下约为 1.2，但如果您设置一个特定的值，它会变得更容易处理。

这是一个在制作动画时添加负边距的示例：

JS

$('div').
    addClass("animating").
    animate({ height: ++i % 2 ? 300 : 100 }, 2000).
    queue(function() {
        $(this).removeClass("animating").dequeue();
    });

CSS

.animating {
    margin-bottom: -.2em;
}

假设默认字体大小为 16px，行高约为 19.2px，所以我们需要删除 3.2px（在 em 中，3.2*100/16 = 0.2）。当然，设置一个实际的行高值会更容易。

http://jsfiddle.net/n6hmr/9/