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

Question

I've been developing a website in Google Chrome and finally decided to see what it looked like in IE and Firefox. To my astonishment, Firefox and Internet Explorer both had the same issue compared to chrome. When using @font-face to import a font Google Chrome displays things the way I want it to, but Firefox and Internet Explorer both show the font with an imaginary "negative top margin". I attached some screenshots as it is a bit hard to explain.

Google Chrome

Firefox

Internet Explorer

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

Google Chrome

Google Chrome http://prntscr.com/o2w3r/direct

Firefox

Firefox http://prntscr.com/o2w1e/direct

Internet Explorer

Internet Explorer http://prntscr.com/o2vyb/direct

Does anyone have any idea what could be causing this? I haven't implemented browser-fix so all the CSS for the navigation bar is:

<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;
}

Markup for the events list is:

<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;
}

Does anyone have any information on this issue?

Answer 1

在这里，“＃nav a”而不是高度尝试删除高度并使用padding：20px 25px;

Answer 2

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

Answer 3

如果其他所有方法都失败，您可以引入LINE-HEIGHT吗？

Answer 4

It was an issue with the font's metrics as Boris Zbarsky suggested in the comments. I downloaded a fresh copy of the typekit from a specialised @font-face website and its working now!