Question

首先，谢谢你查看我的问题。我的问题是我正在尝试在网站顶部创建一个固定菜单，但是当我使用div元素用于不同的菜单项（以实现我喜欢的视觉效果）时，chrome似乎会使用额外的div元素在顶部填充，与firefox不同。我已经包含了代码，还有一个jsfiddle来显示差异。任何关于如何实现所需效果的帮助（更接近火影渲染，我确信你能猜到的那个渲染）会非常有用。我希望菜单项的悬停颜色到达固定黑条的底部，文本从上到下等距离。谢谢你的时间！

编辑：看下面的对话，这是我想要的外观（在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

在CSS中将line-height: 30px;添加到.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; }

它应该可以工作 - 但只有当Google字体被注释掉并使用Arial时，我才能得到几乎100％相同的结果。所以这显然是字体渲染本身的一个区别。我也总是疯狂，因为这种差异;）

Firefox和Chrome渲染div高度不同

1 个答案: