我正在为一个网站制作一个菜单栏，但我遇到了一个非常奇怪的问题，但是我无法修复它。在这个问题下工作了一个小时或更长时间，但没有效果:( 菜单包含 5 个链接，我使用了无序列表和 float:left 链接的组合。在 Safari 中一切看起来都很完美，但在 Firefox 和 Chrome 中最后一个链接显示得较低，好像有换行符。我不能真正使用位置：绝对，因为菜单位于宽度为 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>
谢谢！