Question

我有一个水平菜单，由一系列ul和li组成。子菜单看起来很棒，所以我不需要对它们做任何事情。在你将鼠标悬停在最右边的li上之前，初级ul看起来很棒。

当这样做时，它在Safari中看起来不错，但是在Firefox和IE中，悬停比ul的背景短了2个像素，在Chrome中甚至更多。我已经尝试调整填充以使其在Firefox和IE中看起来不错，但是在Chrome和Safari中你仍然有同样的问题，那就是最右边的li分解为一个新行。当然，将其调整为在Chrome中看起来不错，可以让所有其他浏览器突破新线。这个网站使用Wordpress动态创建菜单，所以我只能更改CSS。以下是代码的基本概念：

<html>
<head>
    <style type="text/css">
    #header {
        margin: 0 auto;
        width: 980px;
    }
    ul li {
        font-size: 13px;
        line-height: 21px;
    }
    #header .main-nav #menu-main-navigation {
        background: #169BAC;
        width: 100%
    }
    #header .main-nav > div ul {
        width: 100%;
        list-style: none;
        float: left;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }
    #header .main-nav > div ul li ul{
        top: 43px;
    }
    #header .main-nav .menu-div>ul>li {
        padding: 5px 14px;
        float: left;
        border-right: solid 1px #54AEC2;
    }
    #header .main-nav .menu-div  ul li:hover {
        background: #2A588D;
    }
    #header .main-nav .menu-div>ul>li:first-child {
        padding-top: 9px;
        height: 28px;
    }
    #header .main-nav .menu-div>ul>li:last-child {
        padding: 5px 26px;
        border-right: none;
    }
    #header .main-nav .menu-div>ul>li a{
        line-height: 15px;
        text-decoration: none;
        color: #FFF;
        padding: 0px 13px;
        text-align: center;
        display: inline-block;
    }
    </style>
<head>
<body>
    <header id="header">
        <nav class="main-nav">
            <div class="menu-div">
                <ul id="menu-main-navigation" class="menu">
                    <li id="menu-item-275"><a href="#">Home</a></li>
                    <li id="menu-item-310"><a href="#">For New<br />Patients</a></li>
                    <li id="menu-item-376"><a href="#">Cleanings &#038;<br />Prevention</a></li>
                    <li id="menu-item-381"><a href="#">General<br />Dentistry</a></li>
                    <li id="menu-item-453"><a href="#">Restore Your<br />Smile</a></li>
                    <li id="menu-item-462"><a href="#">Dental Anxiety &#038;<br />Sedation Options</a></li>
                    <li id="menu-item-463"><a href="#">Dentistry For<br />Kids</a></li>
                    <li id="menu-item-464"><a href="#">Insurance &#038;<br />Payment Options</a></li>
                </ul>
            </div>
        </nav>
    </header>
</body>

您可以在http://riverbend.caswellwebcreations.com看到该网站。

感谢您提供给我的任何帮助。

Answer 1

li元素的宽度由它们的填充和它们内部元素的字体大小（和填充）定义。浏览器之间的字体属性不统一，有些浏览器比其他浏览器更大或更小。这似乎是问题所在。

如果你想拉伸li元素＆＃34;跨浏览器＆＃34;你应该通过css定义li元素的宽度，如下所示：

#menu-item-275{
    width: 64px;
    }
#menu-item-310{
    width: 77px;
    }
#menu-item-376{
    width: 96px;
    }
#menu-item-381{
    width: 82px;
    }
#menu-item-453{
    width: 104px;
    }
#menu-item-462{
    width: 131px;
    }
#menu-item-463{
    width: 105px;
    }
#menu-item-464{
    width: 132px;
    }

如果你总计每个li项目的宽度（加上填充和边框），你得到菜单容器的宽度：980px。浏览器将使用该宽度来渲染li。

我希望这有效！

<强>更新

刚刚找到另一个（也就是更简单的）解决方案！：https://stackoverflow.com/a/14361778/3762078

#header .main-nav .menu-div>ul>li:last-child {
    padding: 5px 20px;
    border-right: none;
    float: none; /* ADD THIS */
    overflow: hidden; /* AND THIS */
    }

＆＃39; float：none＆＃39;。强制最后的li元素尽可能宽（默认块元素的行为）。
＆＃39;溢出：隐藏＆＃39;。防止最后一个li元素伸展到ul的全宽。

虽然这并不能防止每个浏览器上所有li元素的宽度变化，因此使最后一个li的宽度更薄或更宽（有时会扩展到li的高度），一个很好的解决方案。

在某些浏览器中，水平菜单在悬停时不会拉伸到全宽

1 个答案: