Question

我想显示一个按钮，该按钮占用其父亲的所有空间，这是他自己的绝对位置。

但似乎Firefox有一个错误（所有在Chrome和Safari（Webkits）完全运行，我无法测试IE，因为我在Mac上（如果有人可以测试并在评论中说它运行或不，这将是非常好的））。

实现的目标是：

enter image description here

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上，它呈现如下：

enter image description here

您是否知道为什么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中是替换元素，对于替换元素，CSS中left: 0; right: 0的含义规则与非替换元素的规则不同...

CSS：Firefox中按钮的绝对定位

3 个答案: