html - 伪元素 :before rendering differently in Windows 8 and Ubuntu

Question

我正在使用 Entypo 网络字体来创建带有图标的按钮。简而言之，我执行以下操作将图标添加到按钮:

.button {
    float: left;
    position: relative;
    padding: 10px 18px;
    background-color: gray; 
}

.with-icon:before {
    content: '\1F50D';
    font-size: 32px;
    width: 40px;
    display: block;
    top: 8px;
    left: 0;
    text-align: center;     
    position: absolute;
    font-family: 'Entypo';
    font-weight: normal;
    color: white;
}

简单的 HTML:

<a href="" class="button with-icon">Button</a>

在 Ubuntu(Chrome、Firefox 和 Opera)上尝试时一切顺利，但是当我决定在 Windows(Chrome、Firefox 和 IE)上测试所有内容时，出现了一个奇怪的错误。它很容易被注意到:

Ubuntu:

window :

Windows 上的图标低于在 Ubuntu 上测试时的位置。我尝试在没有 top 属性的情况下保留 :before 类，它在 Ubuntu 上有效(图标位于中间)，在 Windows 上图标甚至更低。

可能会发生什么？

(对不起我的英语)

Answer 1

您已经定义了两次顶部样式。也许这已经是错误了？

top: 2px;
display: block;
top: 8px;

如果没有，您能否提供一个 Fiddle需要所有 CSS 吗？