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

Question

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

所需结果

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

• 锚的项目，去一个新的页面
• 按钮没有去任何地方商品，但子菜单
• 跨度为残疾人项目

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

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

的问题

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

• 子菜单绝对定位
• 子菜单被包含在块内的具有除静态以外的位置
• 最长菜单项是按钮

我已经使用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%; 
} 

注意使用分钟 -width。