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

Question

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

期望的结果

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

• 转到新页面的元素的 anchor
• 用于不会随处可见但有子菜单的元素的按钮
• 禁用元素的跨度

注意:该网站仅供有限数量的特定用户使用，因此我不担心缺乏可访问性。

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

问题

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

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

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

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

请注意 Section Titles 元素是如何被压扁的。子菜单仅与 Page Titles 项一样宽(带填充)。还要注意这在顶级子菜单中如何不是问题 - 该菜单扩展到自定义 PDF 标题的宽度。

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

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

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

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

作为一个简单的解决方法，对于这种特殊情况，我只是添加了一些   到 Page Titles 以使其更长。但当菜单是动态创建时，该解决方案将不起作用。

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？

注意:我不想将按钮更改为 anchor 。

Answer 1

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

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

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

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

注意 min-width 的使用。