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表示与未替换元素的表示不同...