移动版Chrome浏览器中内联块的渲染不正确

Question

在Android上的Chrome中，内联块具有超大空间。在桌面上，一切都很好。也许是这种字体提升，但我写了以下CSS指令：html * {max-height:1000000px;}并没有任何改变。

<div class="header__top">
    <div class="container">
        <div class="header__logo logo">
            <a href="" class="a logo__text" style="background: red">Logo</a>
            <div class="logo__line"></div>
            <div class="logo__description" style="background: red">Description</div>
        </div>
        <div class='header__phone' style="background: red">Telephone</div>
        <div class="clear"></div>
    </div>      
</div>

.header
{
    &__top
    {
        background: #3a404c;
        height: 75px;
        min-width: 1220px;
    }
}

.header__logo
{
    float: left;

    &:before {
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        content: '';
    }
}

.logo
{
    &__text
    {
        font-size:30px;
        font-weight: bold;
        color:#fff;
        display: inline-block;
        vertical-align: middle;
    }

    &__line
    {
        height: 50px;
        width: 1px;
        margin-left: 1rem;
        margin-right: 1rem;
        background-color: rgba(255,255,255,.5);
        display: inline-block;
        vertical-align: middle;
    }

    &__description
    {
        display: inline-block;
        color: #fff;
        vertical-align: middle;
    }
}

.header__phone
{
    float: right;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-align: right;

    &:before {
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        content: '';
    }
}

Inline-block extra spaces