我有兩個div，兩個div都位於另一個內部，作爲菜單。在內部，我有一些按鈕元素應該擴展父div。理論上來說，Chrome和IE很好。但我不能讓它在Firefox中工作。按鈕不會展開父div。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？

來源

2013-04-05 Hans

我有一個很難理解爲什麼。菜單需要絕對定位？從代碼中我可以看到它只是一個用於.Menu項目的容器。 – Lowkase 2013-04-05 20:16:34

在「真實」代碼裏面有一個觸發元素.Menu-Wrapper只在點擊時顯示菜單。因此，菜單需要絕對定位。而Menu-Wrapper絕對定位，所以我可以自由移動它。 – Hans 2013-04-05 20:18:08

使用width: -moz-available;

jsFiddle

它會解決它，雖然我不明白爲什麼FF是在這方面表現奇怪..

來源

2013-04-05 20:20:11 Adrift

哇，thx。你是怎麼想出這個的，我嘗試了一些-moz前綴，但不是這個，thx很多，浪費了很多時間在這個上。 – Hans 2013-04-05 20:26:12

Firefox沒有擴展包含按鈕的絕對位置div

的CSS

HTML

見這裏的例子：

回答

相關問題