html – CSS：Firefox中按钮的绝对定位

发布时间：2020-12-26 01:45:24 所属栏目：资源来源：网络整理

导读：我想显示一个按钮,它占据了父母的所有空间,这是他自己的绝对位置. 但似乎Firefox有一个错误(所有在Chrome和Safari(Webkits)完全运行,我无法在IE上测试因为我在Mac上(如果有人可以测试并在评论中说它是否运行,这真的很棒)). 实现的目标是： Div和按钮一起包

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

但似乎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.问题只与按钮有关.

解决方法

它呈现的原因是< button>至少在Gecko中是替换元素,对于替换元素,剩下的规则是：0;右：CSS中的0表示与未替换元素的表示不同…

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!