Css Chrome mobile有时会错误地渲染元素

我正在写一个“响应性设计”的布局，到目前为止，这是一个令人头痛的问题。我决定使用

：before

和

垂直对齐：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>

只有“登录”按钮才会出现这种情况（但我包括了其中两个，以防有所帮助）。按钮包含在一个div中，该div具有
文本对齐：right，以防相关

当然，它在Firefox Mobile和桌面上都表现得很好。我在Chrome Beta v42和最新版本的常规Chrome Mobile上测试了它，我想这可能是一个Webkit问题，但我想知道这是否是一个已知的问题，是否有任何解决方法，或者至少有一个解释说明为什么会发生这种情况。
是否有一个-Webkit-属性可以尝试？嗯，我认为所有这些CSS功能都与旧浏览器兼容，那么我可以问一下为什么使用-webkit-？不管是什么情况，我都在使用prefix-free.js，我认为它可以覆盖任何缺少的-webkit-前缀。它们都应该是，我没有看到任何需要该属性的东西，但是因为这似乎是与Chrome相关的问题，我想它可能会提供一个新的外观。是的，它似乎与Chrome相关，但我在哪里可以添加-webkit-，只是为了测试？老实说，我不知道，哈。你会像这样预先设置修饰符
-webkit-vertical-align:middle我甚至不能100%确定是否需要一个，因为这是我第一次看到
垂直对齐
标签。但尝试一些随机的东西从来都没有坏处。
.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%;
}