Question

内联元素与溢出的垂直对齐有困难：隐藏和不同的行高。基本上这是问题：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<style>
    .mybutton {
        display: inline-block;
        position: relative;
        line-height: 36px;
        vertical-align: middle;
        text-align: center;

        padding: 0;
        border: 0;
        background: transparent;
    }

    span {
        font-family: Roboto, "Helvetica Neue", sans-serif;
        font-size: 14px;
        text-decoration: underline;
    }

    .mybutton span {
        vertical-align: middle;
        display: inline-block;
        min-width: 4px;
        text-align: left;
        line-height: 20px;
    }

    .overflow-ellipsis {
        overflow: hidden;
        width: 100px;
        display: inline-block;
    }
</style>

<ul>
    <li style="height: 36px">
        <span>
            <button class="mybutton">
                <span class="overflow-ellipsis">11111111111111111111111111111</span>
            </button>
            <span>111</span>
        </span>
        <span>111</span>
    </li>
</ul>

具体问题是：

此标记在Chrome中已完全对齐，但在IE 11中，第一个元素略低于第二个元素。
将字体更改为Arial也会使Chrome中的内容不对齐。

任何想法如何解决这个问题都是值得欢迎的。

注意：不同的行高，溢出：隐藏和显示：内联块（在按钮和包含的跨度上）是必须的

Answer 1

在.overflow-ellipsis上添加负余量可以解决问题：

.overflow-ellipsis {
    overflow: hidden;
    width: 100px;
    display: inline-block;
    margin-top: -2px;
}

在此预览：JSFiddle

垂直对齐溢出：隐藏的内嵌块具有不同的线高

1 个答案: