HTML / CSS菜单活动链接背景未对齐

Question

我有一个HTML菜单，它使用一个类来显示网站中当前活动的页面。

<div id="menu">
    <ul>
        <li class="activelink"><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>
</div>

当我设计菜单时，我使用Firefox来预览本地文件，它看起来很好。但是，当我在Chrome和IE浏览器中查看菜单时，显示哪个菜单项处于活动状态的背景在菜单中垂直偏离。

请参阅http://jsfiddle.net/C9mZG/

事实上，当我将代码复制到该jsfiddle并在Firefox中查看时，出现了与Chrome和IE相同的问题，但出于某种原因，我本地文件上的菜单看起来仍然很好。我猜我的菜单样式错了，但我无法解决。基本上，显示当前链接的较暗的红色背景应与较浅的红色菜单垂直对齐。

Answer 1

将css重置应用于填充和边距

*{
    padding:0;
    margin:0;
}

在你的CSS的开头

http://jsfiddle.net/C9mZG/3/

Answer 2

当#menu高40像素时，ul高30像素高。现在，事实是您的所有li元素都具有相同的高度并且溢出ul。你没有注意到它，因为它们具有透明的背景。

我添加了一些背景颜色，以便您可以更好地直观显示：

li {background: rgba(0,64,128,0.5);}

您可以在此处查看：http://jsfiddle.net/C9mZG/4/

一种可能的解决方案是让你的#menu更高。或者，您可以减少li元素的填充。

BTW：您还会注意到，由于li的宽度，您的上一个#menu会转到另一条线上，从而破坏了您的布局。