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

概述这个问题看起来很疯狂,但我想清楚地解释一切. 期望的结果 我有一个带子菜单的水平菜鸟.我是从头开始创建的,所以我没有使用任何现有的框架.它使用按钮,锚点和跨度的组合进行语义标记. >转到新页面的项目的锚点 >按钮,用于不在任何地方但有子菜单的项目 >跨越残疾人物品 注意：此站点适用于数量有限的特定用户,因此我并不担心缺少可访问性. 子菜单应与其包含的最宽菜单项一样宽.并且每个菜单项应填充子菜单的宽 这个问题看起来很疯狂,但我想清楚地解释一切.

期望的结果

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

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

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

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

问题

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

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

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

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

注意Section Title项如何被压扁.子菜单仅与Page Titles项目一样宽(带填充).另请注意,这不是顶级子菜单中的问题 – 该菜单扩展到自定义pdf标题的宽度.

Section Titles项是一个按钮.如果我将其更改为锚点,则子菜单会根据需要进行扩展.如果我更改按钮CSS以删除宽度：100％,则子菜单会根据需要进行扩展.但是,比子菜单窄的菜单项不再填充宽度(即使我添加display：block).

以下是上述修复程序如何破坏菜单其他部分的屏幕截图.

注意当鼠标悬停在文本外时光标不是指针.是的,我可以通过更改li的光标来解决这个问题,但另一个问题是焦点轮廓.我希望焦点轮廓围绕整个菜单项而不仅仅是文本(它是如何使用宽度：100％).

我也试过玩-moz-Box-sizing,但仍然没有快乐.

作为一个简单的解决方法,对于这个特殊情况,我刚刚添加了一些& nbsp;页面标题使其更长.但是,当动态创建菜单时,该解决方案将不起作用.

HTML代码(jsFiddle)

<ul ID="navadminMenu">    <li><a href="#">CompanIEs</a></li    ><li ><button type="button">Books</button>        <ul>            <li><a href="#">Manage Books</a></li            ><li><a href="#">pdf Profiles</a></li            ><li ><button type="button">Customize pdf Titles</button>                <ul>                    <li><a href="#">Page Titles</a></li                    ><li ><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 ><button type="button">Lists</button>        <ul>            <li ><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,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的错误？

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

解决方法 我花了太多时间在这个小小的故障上,但我就像一只有骨头的狗.

经过所有试验和错误以及起草问题的时间后,我找到了一个非常简单的解决方案.我想只是放弃我的问题,但也许它可以帮助别人.

非常非常简单的解决方案.这么简单,我几乎可以哭.

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

注意使用min-wIDth.

总结

以上是内存溢出为你收集整理的html – 为什么这个按钮不像其他浏览器那样在Firefox中扩展到其内容的宽度？全部内容，希望文章能够帮你解决html – 为什么这个按钮不像其他浏览器那样在Firefox中扩展到其内容的宽度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。