CSS:Firefox中按钮的绝对定位

Question

CSS:Firefox中按钮的绝对定位

Jer*_*nce 8 html css firefox cross-browser

我想显示一个按钮,它占据了父母的所有空间,这是他自己的绝对位置.

但似乎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>

Run Code Online (Sandbox Code Playgroud)

这很简单.问题是在Firefox上,它呈现如下:

在此输入图像描述

您是否知道为什么Firefox会像这样呈现此代码并且您是否有使用类似定位的解决方法？

编辑:我不能(我不想)在内部孩子上设置宽度和高度.原因是我使用GWT和布局机制.GWT布局使用bottom/top/left/right来定位和调整元素,因此我无法更改此行为.所有运行与经典div.问题只与按钮有关.

Answer 1

Wab*_*son 6

尝试添加

min-width: -moz-available;

Run Code Online (Sandbox Code Playgroud)

该.inner声明.

我发现它甚至可以在Internet Explorer 7+中运行.在IE6中,它失败了,但这并不奇怪.不幸的是,它在Opera中也完全不像Firefox中那样.

Answer 2

Bor*_*sky 3

它像这样渲染的原因是，<button>至少在 Gecko 中这是一个被替换的元素，对于被替换的元素，left: 0; right: 0CSS 中含义的规则与非替换元素的规则不同......

归档时间：	14 年，5 月前
查看次数：	4677 次
最近记录：	14 年，5 月前