Question

我正在为一个网站的菜单栏工作，但我遇到了一个非常奇怪但是，我无法解决它。只花了一个小时或更长时间才在这个问题上工作，没有效果:( 菜单包含5个链接，我使用了无序列表和浮点数：左链接的组合。 Safari中的一切看起来都很完美，但在Firefox和Chrome中，最后一个链接显示得更低，就好像有一个换行符。我不能真正使用position：absolute，因为菜单位于宽度为1255像素的容器内。请问有人能告诉我究竟是什么原因导致链接显示得更低？任何想法？
我尝试删除页面的其他组件，并没有改变任何东西，所以我很确定它必须在这里：

的CSS：

div.menu
{
    height: 60px;
    background-image: url('2r/menu.png');
    margin-bottom: 10px;
}

ul.menu
{
    padding: 18px 0px 0px 0px;
    margin: 0;
}
ul.menu li
{
    display: inline;
    list-style-type: none;
}

a.menuitem:link
{
    float: left;
    display: block;
    padding: 0px 52px 0px 52px;
    color: #1e0c00;
    text-decoration: none;
    font-size: 22px;
    transition: background-color 0.4s, opacity 1.5s;
    -moz-transition: background-color 0.4s, opacity 1.5s;
    -webkit-transition: background-color 0.4s, opacity 1.5s;
    -o-transition: background-color 0.4s, opacity 1.5s;
}
a.menuitem:visited
{
    color: #1e0c00;
    text-decoration: none;
    font-size: 22px;
}
a.menuitem:hover 
{
    color: #441b00;
    text-decoration: none;
    font-size: 22px;
    background-color: #ffdfb6;
    opacity: 0.6;
}
a.menuitem:active
{
    color: #441b00;
    text-decoration: none;
    font-size: 22px;
}

html：

<div class="menu">
<ul class="menu">
<li><a class="menuitem" href="index.html">Xxxxxx</a></li>
<li><a class="menuitem" href="Xxxxxxx.html">Xxxxxxx Xxxxxxxxx</a></li>
<li><a class="menuitem" href="Xxxxxxxxx.html">Xxxxxxxxx</a></li>
<li><a class="menuitem" href="Xxxxxxxx.html">Xxxxxx Xxxxxxxx</a></li>
<li><a class="menuitem" href="Xxxx.html">Xxxxxxxxxx Xxxxxxxxx</a></li>
</ul>
</div>

谢谢！

Answer 1

发现它！感谢CBroe的建议，在将部分css代码复制到jsfiddle后，结果很好。代码中的其他东西导致错误，这是因为我没有在ul.menu中定义某些元素（padding-left，list-style-position）我在代码中进一步定义了ul元素并且它“级联” “超过ul.menu导致它行为怪异。很抱歉花时间和感谢提示！

菜单栏在Safari上正常显示，但它在Chrome和Firefox上搞砸了

1 个答案: