使用 @font-face 时，Firefox 和 IE 中的负上边距答案

【问题标题】：Negative top margin in firefox and IE when using @font-face使用 @font-face 时，Firefox 和 IE 中的负上边距
【发布时间】：2012-12-18 19:15:41
【问题描述】：

我一直在用谷歌浏览器开发一个网站，最后决定看看它在 IE 和 Firefox 中的样子。令我惊讶的是，与 chrome 相比，Firefox 和 Internet Explorer 都存在同样的问题。当使用@font-face 导入字体时，谷歌浏览器会以我想要的方式显示内容，但 Firefox 和 Internet Explorer 都以假想的“负上边距”显示字体。我附上了一些截图，因为有点难以解释。

谷歌浏览器

火狐

Internet Explorer

Internet Explorer http://img846.imageshack.us/img846/3021/a78c216586e54bc2b05d2a8.png

谷歌浏览器

火狐

Internet Explorer

有人知道是什么原因造成的吗？我还没有实现浏览器修复，所以导航栏的所有 CSS 都是：

<div id="nav">
    <ul>
        <li>
            <a href="#main">HOME</a>
        </li>
        <li>
            <a href="#news">NEWS</a>
        </li>
        <li>
            <a href="#events">EVENTS</a>
        </li>
        <li>
            <a href="#about">ABOUT</a>
        </li>
        <li>
            <a href="#music">MUSIC</a>
        </li>
        <li>
            <a href="#study">STUDY</a>
        </li>
        <li>
            <a href="#gallery">GALLERY</a>
        </li>
        <li>
            <a href="#shop">SHOP</a>
        </li>
        <li>
            <a href="#contact">CONTACT</a>
        </li>
    </ul>
</div>

#nav a {
    height: 60px;
    margin-bottom: 0px;
    width: 105px;
    display: block;
    line-height: 60px;
    text-align: center;
    font-family: bebas;
    text-decoration: none;
    color: #555555;
    font-size: 25px;
}

事件列表的标记是：

<div class="entry">
    <div class="date">
        <div class="day">15</div>
        <div class="month">Nov</div>
    </div>      
    <div class="location">
        <div class="city">Melbourne</div>
        <div class="club">St Judes Anglican Church</div>
    </div>  
    <div class="clear"></div>
</div>

#events .entry{
    text-transform: uppercase;
    font-family: bebas;
    font-size: 30px;
    color: #555555;
    word-spacing: 4px;
    border-top: 2px solid #4A3948;
}
.city{
    font-size: 40px;
}

.location{
    padding-left:10px;
}
.day{
    font-size: 65px;
    line-height: 55px;
}
.date{
    text-align: center;
    width: 95px;
    border-right: 4px solid;
}
.club{
    font-size: 28px;
    line-height: 31px;
}

有人知道这个问题吗？

【问题讨论】：

标记在哪里...你只放入了css。
@AdityaSaxena 我添加了标记。列表项没有样式。
字体的度量可能有错误，IE/Firefox 使用的度量是错误的，但谷歌没有使用它，因为它依赖于字体度量的其他部分......你看过体面的字体编辑器中的字体指标？
@BorisZbarsky Nup，但由于它不仅仅是一种字体，我怀疑它。我会检查你的。
好的。好吧，如果没有看到所涉及的实际标记，很难说其他话。鉴于您上面的样式，HOME 和 NEWS 最终应该垂直堆叠，但在您的屏幕截图中它们彼此相邻，因此显然这里有更多相关的样式。

标签： html css internet-explorer google-chrome firefox

【解决方案1】：

这里“#nav a”而不是height尝试移除height并使用padding:20px 25px;

【讨论】：

除了使按钮高度非常大之外什么都不做

【解决方案2】：

我已经根据您的字体大小提到了示例填充，您可以添加使用填充......

【讨论】：

【解决方案3】：

如果一切都失败了，你可以引入 LINE-HEIGHT 吗？

【讨论】：

它们都有 line-height 作为垂直对齐中心的技巧。

【解决方案4】：

正如 Boris Zbarsky 在 cmets 中建议的那样，这是字体指标的问题。我从一个专门的 @font-face 网站下载了一个新的 typekit 副本，它现在可以工作了！

【讨论】：