Question

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

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

此行为在此answer中得到了很好的解释。

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

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

vertical-align目前在Chrome 33中出现问题，该元素的所有直接子元素（文本节点和top / inline-block内容）都与{的上边缘对齐{1}}。
replaced是另一种选择，但div会稍微向上/向下移动，同时使用jQuery为其bottom / vertical div设置动画。
height似乎工作正常，但我不确定浏览器如何计算得到的对齐方式。

我还发现了其他黑客攻击，例如在父级中应用padding或middle并将所有子级包装在容器中，该容器会重置其line-height:0 / font-size:1px ，但那些是非常难看的黑客。

line-height的正确值是什么，或者对此用例有正确的解决方法？

更新： font-size显然会将内联块元素与行框的中间对齐。从我的测试到目前为止，似乎只要元素的底边高于基线，就没有动画vertical-align的闪烁问题。要演示middle height / text-align发生的闪烁问题（请注意顶部边框和文字）：demo

bottom text-bottom或vertical-align（为了安全起见）似乎工作得很好（由于Chrome错误而避免middle）。我仍然愿意接受见解。

上下文：我正在使用jQuery来动画text-top元素。 jQuery的动画（top / inline-block / fadeIn / fadeOut / slideUp / etc）在动画中设置元素slideDown，导致不舒服将整个页面置于动画animate元素下方的副作用在动画持续时间内稍微向下推。

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

SSCCE中使用的代码：

Demo #1：

overflow:hidden

inline-block

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

Demo #2：

$('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;
}

（与演示＃1相同的CSS）

由于

<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 #3闪烁：

height

vertical-align: bottom

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

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/

如何清除溢出的内联块元素的下边距：隐藏？

1 个答案: