0

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

Ubuntu

视窗：

视窗

Windows 上的图标位置低于在 Ubuntu 上测试时的位置。我尝试在:before没有属性的情况下离开类top，它在 Ubuntu 上工作（图标放在中间），在 Windows 上，图标放在更低的位置。

可能发生什么？

（对不起我的英语不好）

4

1 回答 1

1

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

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

如果没有，你能提供一个包含所有需要的 CSS的Fiddle吗？

于 2013-04-15T13:18:41.950 回答