2

メニューとして機能する 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;

jsフィドル

これで修正されますが、このコンテキストで ff が奇妙な動作をする理由はよくわかりません..

于 2013-04-05T20:20:11.173 に答える