メニューとして機能する 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で動作させる方法はありますか?