Chrome移动版有时会错误地呈现元素

Question

我正在写一个＆＃34;响应式设计＆＃34;布局，到目前为止一直很头疼。我决定使用:before和vertical-align: middle;解决方法垂直对齐“按钮”中的某些文字，除了一个按钮外，它适用于所有内容！问题是，在刷新时，Chrome Mobile有时会正确呈现它，有时它会赢得它;这似乎是随意的，我还没能找到一种模式。

以下是不应该看的内容：

以下是它的外观：

以下是相关标记：

<div class="button">
    <a href="/login">
        <span class='button-container'>
            <span class="button-icon">
                <i class="fa fa-sign-in"></i>
            </span><br/>
            <span class="button-label">
                Log In
            </span>
        </span>
    </a>
</div>
<div class="button">
    <a href="/signup">
        <span class='button-container'>
            <span class="button-icon">
                <i class="fa fa-user-plus"></i>
            </span><br/>
            <span class="button-label">
                Join Us!
            </span>
        </span>
    </a>
</div>

CSS：

.button
{
    display: inline-block;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
.button a
{
    display: inline-block;
    height: 100%;
}
.button a:before //So its contents vertically-align
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.button-container
{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.button-icon
{
    font-size: 180%;
}
.button-label
{
    font-size: 90%;
}

它只发生在＆＃34;登录＆＃34;按钮（但我包括其中两个，以防它有帮助）。这些按钮包含在text-align: right;的div中，以防相关。

它在Firefox Mobile和桌面上呈现良好，当然。我在Chrome Beta v42和常规Chrome Mobile的最新版本上进行了测试，我想这可能是Webkit的事情，但我想知道它是否是一个已知问题，如果有任何变通办法，或者在至少解释为什么会发生。