跨浏览器填充/边距

时间:2011-03-01 23:01:14

标签: html css internet-explorer cross-browser

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

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

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

menu li overflow in browsers other than IE

问题在于,当我将鼠标悬停在菜单选项(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;
}

2 个答案:

答案 0 :(得分:1)

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

这是否按预期工作? JSFiddle example

答案 1 :(得分:0)

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

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

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

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