我想显示一个按钮,它占据了父母的所有空间,这是他自己的绝对位置.
但似乎Firefox有一个错误(所有在Chrome和Safari(Webkits)完全运行,我无法在IE上测试因为我在Mac上(如果有人可以测试并在评论中说它是否运行,这真的很棒)).
实现的目标是：
Div和按钮一起包含在绝对定位的包装中.
<!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表示与未替换元素的表示不同…
