Firefox 不扩展包含按钮的绝对定位 div

Question

我有两个 div，两个都是绝对定位的，一个在另一个里面，用作菜单。在内部元素中，我有一些应该展开父 div 的按钮元素。理论上来说 Chrome 和 IE 都不错。但我无法让它在 Firefox 中工作。这些按钮不会展开父 div。

奇怪的是，如果我在按钮后面添加一个额外的 a 标签元素，它就会起作用。

CSS

/* .Menu-Wrapper and .Menu have to have postion: absolute */

.Menu-Wrapper {
    position: absolute;
    top: 100px;
    left: 100px;
}
.Menu {
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px;
}
.Menu-item {
    background: red;
    border: 0;
    margin: 2px;
    padding: 0;
    display: block;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

html

<div class="Menu-Wrapper">
        <!-- there would be a trigger button here, left out for simplicity -->
    <div class="Menu">
        <!-- in firefox the follwoing buttons do not expand to width text -->
        <button class="Menu-item">Menu Point 1 ....</button>
        <button class="Menu-item">Menu Point 1</button>
        <button class="Menu-item">Menu Point 1..</button>
    </div>
</div>

请参阅此处的示例：

http://jsfiddle.net/2Xbpq/（在 Firefox 中不起作用）

知道如何让它在 Firefox 中工作吗？

Answer 1

使用width: -moz-available;

jsFiddle

它会解决这个问题，尽管我不太确定为什么 ff 在这种情况下表现得很奇怪..