html - Firefox 和 Chrome 渲染 div 高度不同

Question

首先，感谢您查看我的问题。我的问题是我试图在网站顶部创建一个固定菜单，但是当我为不同的菜单项使用 div 元素(以实现我想要的视觉效果)时，chrome 似乎渲染了额外的 div 元素顶部填充，与 Firefox 不同。我已经包含了代码，以及一个 jsfiddle 来显示差异。任何关于如何达到预期效果的帮助(我相信您可以猜到，它更接近 Chrome 中的 Firefox 渲染)将非常有帮助。我希望菜单项的悬停颜色到达固定黑条的底部，文本从上到下等距。感谢您的宝贵时间!

编辑:见下面的对话，这是我想要的外观(在 chrome 中正确呈现) http://jsfiddle.net/9wQxu/5/

代码如下:(抱歉格式不好)

HTML:

<div id="topbar">
<div class="facebook">
<a href="http://www.facebook.com/pages/Kristen-Hemphill/359919877367564">
<img src="img/facebook_logo.png" style="width:28px; height:28px; padding-left:5px; padding-top:2px; float:left;" />
</a>
<a href="http://twitter.com/krishemp">
<img src="img/twitter.png" style="width:28px; height:28px; padding-left:5px; padding-top:2px; float:left;" />
</a>
        </div>
        <div class='menuitem'>  <a href="index.php">HOME</a>
        </div>
        <div class='menuitem'>  <a href="media.html">LISTEN</a>
        </div>
        <div class='menuitem'>  <a href="gallery.html">GALLERY</a>
        </div>
        <div class='menuitem'>  <a href="bio.html">BIO</a>
        </div>
        <div class='menuitem'>  <a href="calendar.html">CALENDAR</a>
        </div>
        <div class='menuitem'>  <a href="booking.html">BOOKING</a>
        </div>
    </div>

CSS:

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400);

a:link {color:#000;text-decoration:none; font-family: 'Josefin Sans', sans-serif;}     /* unvisited link */
a:visited {color:#000;text-decoration:none;font-family: 'Josefin Sans', sans-serif;}  /* visited link */
a:hover {color:#36d8e7;text-decoration:none;font-family: 'Josefin Sans', sans-serif;}  /* mouse over link */
a:active {color:#36d8e7;text-decoration:none;font-family: 'Josefin Sans', sans-serif;}  /* selected link */

.menuitem a{width:auto;
    font-size:30px;
    z-index:9999; 
    float:left; 
    padding: 0px 10px 0px 10px;
    color: #fff;
    background-color: #000;   
}

.menuitem a:hover {
    color: #fff;
    background-color: #36d8e7;
    }

#topbar {
    background-color:#000;
    position:fixed;
    z-index:999;
    width:100%;
    height:40px;
    color:#fff;
    top:0;
    left:0;
    }

.facebook {
    top:0px; 
    position:relative; 
    float:left;
    }

Answer 1

将 line-height: 30px; 添加到 CSS 中的 .menuitem。

编辑我试过这个 CSS:

.menuitem a {
        width:auto;
        font-size:30px;
        line-height:100%;
        z-index:9999; 
        float:left;
        padding: 5px 10px 5px 10px;
        color: #fff;
        background-color: #000;   
}

它应该可以工作——但只有当谷歌字体被注释掉并使用 Arial 时，我才得到几乎 100% 相同的结果。所以这显然是字体渲染本身的不同。我也总是因为这种差异而发疯；)