为什么这个按钮在 Firefox 中没有像在其他浏览器中那样扩展到其内容的宽度？

Question

这个问题看起来很疯狂，但我想清楚地解释一切。

期望的结果

我有一个带有子菜单的水平菜单栏。我从头开始创建它，所以我没有使用任何现有的框架。它使用按钮、锚点和跨度的组合进行语义标记。

• 进入新页面的项目的锚点
• 不去任何地方但有子菜单的项目的按钮
• 禁用项目的跨度

注意：这个网站是为有限数量的特定用户提供的，所以我不担心缺乏可访问性。

子菜单的宽度应与其包含的最宽菜单项一样宽。并且每个菜单项都应填充子菜单的宽度，以便光标和焦点轮廓按需要显示。

问题

在 Firefox 中，在以下情况下，子菜单不会扩展到最宽项的宽度：

• 子菜单绝对定位
• 子菜单包含在位置不是静态的块中
• 最长的菜单项是一个按钮

我已经用 Chrome、IE 8、Firefox 12 和 Firefox 20 进行了测试。它在 Chrome 和 IE 中按需要显示，但在任何版本的 Firefox 中都没有。

我创建了一个缩小版本，其中包含 JavaScript、图像、禁用项和许多菜单项。代码在下面和jsFiddle 上。这是 Firefox 20 中的屏幕截图。

注意 Section Titles 项目是如何被挤压的。子菜单仅与 Page Titles 项一样宽（带有填充）。另请注意，在顶级子菜单中这不是问题 - 该菜单扩展到自定义 PDF 标题的宽度。

Section Titles 项是一个按钮。如果我将其更改为锚点，则子菜单会根据需要展开。如果我更改按钮 CSS 以删除 width: 100%，则子菜单会根据需要展开。但是，比子菜单窄的菜单项不再填充宽度（即使我添加了display: block）。

这是上述修复如何破坏菜单其他部分的屏幕截图。

请注意，当鼠标悬停在文本之外时，光标不是指针。是的，我可以通过更改li 的光标来解决这个问题，但另一个问题是焦点轮廓。我希望焦点轮廓围绕整个菜单项，而不仅仅是文本（这就是它与 width: 100% 一起使用的方式）。

我也试过玩-moz-box-sizing，但还是不开心。

作为一种简单的解决方法，对于这种特殊情况，我刚刚在 页面标题 中添加了一些   以使其更长。但是当菜单是动态创建时，该解决方案将不起作用。

HTML 代码 (jsFiddle)

<ul id="navAdminMenu">
    <li><a href="#">Companies</a></li
    ><li class="hasSubmenu"><button type="button">Books</button>
        <ul>
            <li><a href="#">Manage Books</a></li
            ><li><a href="#">PDF Profiles</a></li
            ><li class="hasSubmenu"><button type="button">Customize PDF Titles</button>
                <ul>
                    <li><a href="#">Page Titles</a></li
                    ><li class="hasSubmenu"><button type="button">Section Titles</button>
                        <ul>
                            <li><a href="#">Profile Section</a></li
                            ><li><a href="#">Index Section</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li
    ><li class="hasSubmenu"><button type="button">Lists</button>
        <ul>
            <li class="hasSubmenu"><button type="button">Categories</button>
                <ul>
                    <li><a href="#">Manage</a></li
                    ><li><a href="#">Reports</a></li>
                </ul>
            </li
            ><li><a href="#">Key Contact Positions</a></li>
        </ul>
    </li>
</ul>

CSS 代码

#navAdminMenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #efefef;
}
#navAdminMenu button {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}
#navAdminMenu button::-moz-focus-inner {
    padding: 0;
    border: none;
}
#navAdminMenu a {
    text-decoration: none;
}
#navAdminMenu li {
    display: inline-block;
    margin: 0;
    border-right: 1px solid #ccc;
}
#navAdminMenu li:hover {
    background-color: #4b545f;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
    display: inline-block;
    height: 2.3em;
    line-height: 2.6;
    padding: 0 10px;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
    color: #06c;
}
#navAdminMenu > li > button:focus, #navAdminMenu > li > a:focus {
    outline: 0; /* Firefox displays outline outside the menu box-shadow */
    box-shadow: 0 0 0 3px #06c;
}
#navAdminMenu > li:hover > button, #navAdminMenu > li:hover > a {
    color: #fff;
}
#navAdminMenu > li.hasSubmenu > button:after {
    content: "v";
    display: inline-block;
    width: 13px;
    margin-left: 5px;
}
#navAdminMenu ul {
    display: none;
    position: absolute;
    padding: 0;
    background-color: #5f6975;
}
#navAdminMenu li:hover > ul {
    display: block;
}
#navAdminMenu ul > li {
    display: block;
    position: relative;
    border-top: 1px solid #999;
    border-bottom: 1px solid #000;
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
    height: 2em;
    line-height: 2;
    padding: 0 30px 0 10px;
    white-space: nowrap;
}
#navAdminMenu ul > li > button {
    width: 100%; /* full width of submenu */
    text-align: left;
}
#navAdminMenu ul > li > a {
    display: block; /* full width of submenu */
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
    color: #fff;
}
#navAdminMenu ul > li > button:focus, #navAdminMenu ul > li > a:focus {
    outline: #fdcb01 solid 3px;
}
#navAdminMenu ul > li.hasSubmenu > button:after {
    content: ">";
    width: 16px;
    position: absolute;
    right: 0;
}
#navAdminMenu ul ul {
    left: 100%;
    top: 0;
}

问题

我缺少一些简单的东西吗？还是我应该将此作为错误报告给 Mozilla？

注意：我不想将按钮更改为锚点。

Answer 1

我在这个小故障上花费了太多时间，但我就像一条有骨头的狗。

经过所有的反复试验和起草问题所花费的时间，我找到了一个非常简单的解决方案。我想放弃我的问题，但也许它可以帮助其他人。

非常非常简单的解决方案。如此简单，我几乎要哭了。

#navAdminMenu ul > li > button {
    /* full width of submenu (even when its the longest item) */
    min-width: 100%;
}

注意min-width的使用。