html - 跨浏览器填充/边距

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

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

这是否按预期工作？ JSFiddle example