伪元素：在 Windows 8 和 Ubuntu 中呈现不同之前答案

【问题标题】：Pseudo element :before rendering differently in Windows 8 and Ubuntu伪元素：在 Windows 8 和 Ubuntu 中呈现不同之前
【发布时间】：2013-04-15 22:24:12
【问题描述】：

我正在使用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：

窗户：

Windows 上的图标位置低于在 Ubuntu 上测试时的位置。我尝试在没有 top 属性的情况下保留 :before 类，它适用于 Ubuntu（图标放在中间），而在 Windows 上，图标放置得更低。

可能会发生什么？

（对不起我的英语）

【问题讨论】：

你能用不是来自网络字体的符号来检查吗？我隐约记得可能存在基线问题。
我尝试用一个字母代替符号并将字体更改为简单的无衬线字体，它在两个系统中都可以正常工作。有什么可以做的吗？
我假设你有通常四种格式的字体（woff、eot、svg、ttf）？作为黑暗中的巫毒刺，我会尝试通过像Free Font Converter这样的svg-to-ttf转换器推动svg字体，并通过@fontface generator推动TTF。
您使用的是 fontsquirrel 的套件吗？我可能需要更深入地查看文件才能做出更有根据的猜测。

标签： html css

【解决方案1】：

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

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

如果没有，您能否提供一个 Fiddle 以及所需的所有 CSS？

【讨论】：