Firefox는 절대 위치 지정된 div를 포함하는 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/

어떤 생각이 어떻게 파이어 폭스에서 작동하도록 (파이어 폭스에서 작동하지 않는)

?

Answer 1

사용 width: -moz-available;

jsFiddle

FF는이 맥락에서 이상한 행동을하는 이유를 나는 아주 확실하지 않다하지만 그것은, 그것을 해결거야 ..