跨浏览器填充/边距

Question

我想知道你是否可以给我一些有关如何纠正这个问题的有用提示？我的网站上有一个主菜单，代码如下：

li:hover {
    background-color: #222222;
    padding-top: 8px;
    padding-bottom: 9px;
}

这是一个实际看起来的演示：

问题在于，当我将鼠标悬停在菜单选项（li）上时，会出现背景，但它会溢出到菜单背景的外部，并使它看起来真的很狡猾/垃圾/便宜/糟糕！

请注意（显然）当我更改填充以使其在这些浏览器中正确显示时，它在IE中显得太小了！所以无论如何我都搞砸了。在所有浏览器中，如何使这样的小缺陷看起来一样？

更新

HTML（菜单）：

            <ul class="menu">
                <li class="currentPage" href="index.php"><a>Home</a></li>
                <li><a href="services.php">Services</a></li>
                <li><a href="support.php">Support</a></li>
                <li><a href="contact.php">Contact Us</a></li>
                <li><a href="myaccount/" class="myaccount">My Account</a></li>
            </ul>

CSS：

.menu {
    margin-top: 5px;
    margin-right: 5px;
    width: 345px;
    float: right;
}

li {
    font-size: 9pt;
    color: whitesmoke;
    padding-left: 6px;
    padding-right: 8px;
    display: inline;
    list-style: none;
}

li:hover {
    background-color: #222222;
    padding-top: 8px;
    padding-bottom: 9px;
}

Answer 1

您可以通过不根据悬停更改填充来防止出现问题。此外，你应该悬停在

上

这是否按预期工作？ JSFiddle example

Answer 2

您的问题可能是由于您使用了display：inline。尝试在ul上设置显式高度。用你的例子做这件事对我有用：

ul {
 border-bottom: 2px solid black;
 height: 28px;
}

我添加了边框，以便能够看到我对齐的位置。

顺便说一句，正确的解决方案是不使用li：hover，而是a：hover，如前所述。