CSS：Firefox 中按钮的绝对定位
我想显示一个按钮，它占据其父级的所有空间，而父级本身是绝对定位的。
但似乎 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 布局使用底部/顶部/左侧/右侧来定位和调整元素大小，因此我无法更改此行为。所有运行都使用经典 div。问题仅与按钮相关。
I want to display a button which takes all spaces of its parent which is himself absolute positioned.
But it seems that Firefox has a bug with it (All runs perfectly in Chrome and Safari (Webkits), I can't test on IE because I'm on mac (if anyone can test and say in comment if it runs or not, it would be really nice)).
The goal to achieve is :
Div and button are together contained by a wrapper which is absolute positioned.
The HTML code is :
<!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>
That's quite simple. The problem is that on Firefox, it renders like this :
Have you got any idea why Firefox renders this code like this and have you got any workaround using similar positioning ?
EDIT : I can't (and I don't want) set width and height on inner child. The reason is that I use GWT with layout mechanisms. GWT layout uses bottom/top/left/right to position and size elements, so I can't change this behavior. All runs with classic div. The problem is only button related.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试添加
到
.inner声明中。我发现它甚至在 Internet Explorer 7+ 中也能工作。在 IE6 中它会失败，但这并不奇怪。不幸的是，它在 Opera 中也失败了，就像最初在 Firefox 中一样。
Try adding
to the
.innerdeclaration.I've found that it works even in Internet Explorer 7+. In IE6 it fails but it's hardly a surprise. Unfortunately it also fails in Opera exactly the way it does originally in Firefox.
它像这样渲染的原因是
The reason it renders like this is that
<button>is a replaced element at least in Gecko and for replaced elements the rules on whatleft: 0; right: 0means in CSS are different than they are for non-replaced elements...还为内部 div 设置宽度和高度。
Set a width and height for the inner div also.