Firefox和Chrome渲染div高度不同

Question

First, thanks for checking out my question. My problem is i'm trying to create a fixed menu at the top of a site, but when i use div elements for the different menu items (to achieve the visual effect i'd like) chrome seems to render the div elements with extra padding at the top, differently than firefox. I've included the code, along with a jsfiddle to show the difference. Any help on how to achieve the desired effect (which is closer to the firefox rendering that the one in chrome as I'm sure you could guess) would be incredibly helpful. I'd like the hover color of the menu items to reach the bottom of the fixed black bar, with the text equidistant top to bottom. Thank you for your time!

EDIT: see below conversation, this is the desired look im going for (rendering correctly in chrome) http://jsfiddle.net/9wQxu/5/

The code as follows: (apologies for poor formatting)

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

Add line-height: 30px; to .menuitem in CSS.

Edit I've tried with this 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;   
}

and it should work - but I've got almost 100% same result only when Google font is commented out and Arial is used. So it's obviously a difference in the font-rendering itself. I'm also always going crazy becuase of such differences ;)