CSS：Firefox中按鈕的絕對定位

Question

我想顯示一個按鈕，它占據了父母的所有空間，這是他自己的絕對位置。

但似乎Firefox有一個錯誤（所有在Chrome和Safari（Webkits）完全運行，我無法測試IE因為我在Mac上（如果有人可以測試並在評論中說它是否運行，這真的很棒））。

實現的目標是：

在此輸入圖像描述

Div和按鈕一起包含在絕對定位的包裝中。

HTML代碼是：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .wrapper {
                background-color: red;
                position: absolute;
                width: 100px;
                height: 100px;
            }

            .inner {
                background-color: blue;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper" style="top: 50px; left: 50px;">
            <div class="inner">div</div>
        </div>

        <div class="wrapper" style="top: 50px; left: 200px;">
            <button class="inner">button</button>
        </div>
    </body>
</html>

這很簡單。 問題是在Firefox上，它呈現如下：

在此輸入圖像描述

您是否知道為什么Firefox會像這樣呈現此代碼並且您是否有使用類似定位的解決方法？

編輯：我不能（我不想）在內部孩子上設置寬度和高度。 原因是我使用GWT和布局機制。 GWT布局使用bottom / top / left / right來定位和調整元素，因此我無法更改此行為。 所有運行與經典div。 問題只與按鈕有關。

Answer 1

嘗試添加

min-width: -moz-available;

到.inner聲明。

我發現它甚至可以在Internet Explorer 7+中運行。 在IE6中，它失敗了，但這並不奇怪。 不幸的是，它在Opera中也完全不像Firefox中那樣。

Answer 2

設置內部div的寬度和高度。

Answer 3

它呈現的原因是<button>至少在Gecko中是替換元素，對於替換元素， left: 0; right: 0的規則是left: 0; right: 0 left: 0; right: 0 CSS中的left: 0; right: 0表示與未替換元素的表示不同...

CSS：Firefox中按鈕的絕對定位

問題描述

3 個解決方案

解決方案1
6 2011-09-01 14:39:15

解決方案2
3 2011-09-01 14:12:58

解決方案3
3 已采納 2011-09-02 20:44:09

CSS：Firefox中按鈕的絕對定位

問題描述

3 個解決方案

解決方案1 6 2011-09-01 14:39:15

解決方案2 3 2011-09-01 14:12:58

解決方案3 3 已采納 2011-09-02 20:44:09

解決方案1
6 2011-09-01 14:39:15

解決方案2
3 2011-09-01 14:12:58

解決方案3
3 已采納 2011-09-02 20:44:09