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

【问题标题】：Horizontal menu not stretching to full width on hover in certain browsers在某些浏览器中悬停时水平菜单不会拉伸到全宽
【发布时间】：2014-07-15 12:24:51
【问题描述】：

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

这样做时，它在 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 上查看该网站。

感谢您为此提供的任何帮助。

【问题讨论】：

您应该发布复制问题所需的最少代码。见MCVE 和How to Ask
花了一些时间，但我能够创建一个可以包含在这个问题中的代码示例。

标签： html wordpress css

【解决方案1】：

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

如果你想“跨浏览器”拉伸 li 元素，你应该通过 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 项的宽度相加（加上填充和边框），您将得到菜单容器的宽度：980 像素。浏览器将采用该宽度来呈现 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 */
    }

'浮动：无'。强制最后一个 li 元素尽可能宽（默认块元素的行为）。
'溢出：隐藏'。防止最后一个 li 元素拉伸到 ul 的全宽。

虽然这并不能阻止每个浏览器上所有 li 元素的宽度发生变化，因此使最后一个 li 的宽度变细或变宽（有时会扩大该 li 的高度）是一个不错的解决方案。

【讨论】：

我不得不进行一些调整，因为它在 IE 中看起来很垃圾，但问题的概念和解释都很棒。感谢您的帮助！
谢谢！如果您有兴趣，我找到了另一种解决方案。阅读更新！