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

Question

我有两个div，两个都是绝对的，一个在另一个里面，用作菜单。在内部我有一些按钮元素，应该扩展父div。理论上很好，Chrome和IE。但我不能让它在Firefox中工作。按钮不会展开父div。

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

的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在这种情况下表现得很奇怪..