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

Question

这个问题似乎很疯狂，但我想清楚地解释一切。

期望结果

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

• 用于转到新页面的项目的锚点
• 按钮，用于不在任何地方但有子菜单的项目
• 跨越残疾人物品

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

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

问题

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

• 子菜单绝对定位
• 子菜单包含在具有静态
以外位置的块中
• 最长的menuitem是一个按钮

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

我创建了一个缩小版本，包含JavaScript，图片，禁用的项目以及删除的许多菜单项。代码在下面，也在jsFiddle上。这是Firefox 20中的屏幕截图。

注意章节标题项目是如何被压扁的。子菜单仅与页面标题项目（带填充）一样宽。另请注意顶级子菜单中的这不是问题 - 该菜单扩展到自定义PDF标题的宽度。

章节标题项目是一个按钮。如果我将其更改为锚点，则子菜单会根据需要进行扩展。如果我更改按钮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。