2

我有两个 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 中运行吗？

4

1 回答 1

4

采用width: -moz-available;

jsFiddle

它会解决它，虽然我不太清楚为什么 ff 在这种情况下表现得很奇怪..

于 2013-04-05T20:20:11.173 回答