菜单栏在 Safari 上正常显示，但在 Chrome 和 Firefox 上显示混乱答案

【问题标题】：Menubar displays properly on Safari, but it's messed up on Chrome and Firefox菜单栏在 Safari 上正常显示，但在 Chrome 和 Firefox 上显示混乱
【发布时间】：2013-04-10 14:22:12
【问题描述】：

我正在为一个网站制作一个菜单栏，但我遇到了一个非常奇怪的问题，但是我无法修复它。在这个问题下工作已经花了一个小时或更长时间，但没有效果:( 菜单包含 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>

谢谢！

【问题讨论】：

请展示一个使用jsfiddle.net或其他东西的工作示例，以便我们查看问题。
我为你做了一个jsfiddle
找到了！感谢CBroe的建议，只将部分css代码复制到jsfiddle中后，效果还不错。代码中的其他内容导致了错误，这是因为我没有在 ul.menu 中定义某些元素（padding-left，list-style-position）我在代码中进一步定义了 ul 元素并且它“级联" 在 ul.menu 上导致它表现得很奇怪。很抱歉占用您的时间，并感谢您的提示！编辑：大卫的忍者

标签： html css menubar

【解决方案1】：

找到了！感谢CBroe的建议，只将部分css代码复制到jsfiddle中后，效果还不错。代码中的其他内容导致了错误，这是因为我没有在 ul.menu 中定义某些元素（padding-left，list-style-position）我在代码中进一步定义了 ul 元素并且它“级联" 在 ul.menu 上导致它表现得很奇怪。很抱歉占用您的时间，感谢您的提示！

【讨论】：