跨浏览器填充/边距

Question

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

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

这是其实际外观的演示：

问题是，当我将鼠标悬停在菜单选项（li）上时，背景出现了，但溢出到菜单背景的外部，使它看起来真的很do脚/胡扯/便宜/讨厌！

请注意，（显然）当我更改填充以使其在这些浏览器中正确显示时，它在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示例

Answer 2

您的问题可能是由于您使用display：inline。 尝试在ul上设置明确的高度。 使用您的示例执行此操作对我来说很有效：

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

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

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