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

Question

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

期望的结果

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

• 用于转到新页面的项目的锚点
• 没有任何东西但有子菜单的项目的按钮
• 跨越残疾人物品

注意:此站点适用于数量有限的特定用户,因此我并不担心缺少可访问性.

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

问题

在Firefox中,子菜单不会扩展到以下方案中最宽项目的宽度:

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

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

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

注意Section Title项如何被压扁.子菜单仅与Page Titles项目一样宽(带填充).另请注意,这不是顶级子菜单中的问题 - 该菜单扩展到自定义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.