CSS：在Firefox中绝对定位一个按钮 [英] CSS : absolute positioning of a button in Firefox
问题描述
但是看起来Firefox有一个bug（所有的运行完全在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>
< /头>
< body>
< div class =wrapperstyle =top：50px; left：50px;>
< div class =inner> div< / div>
< / div>
< div class =wrapperstyle =top：50px; left：200px;>
< button class =inner>按钮< / button>
< / div>
< / body>
< / html>
这很简单。问题是在Firefox上，它呈现如下：
你有什么想法为什么Firefox渲染这样的代码，你有类似的定位任何解决方法？
编辑：我不能（和我不想）设置宽度和高度内部孩子。原因是我使用GWT与布局机制。 GWT布局使用bottom / top / left / right来定位和大小元素，所以我不能改变这种行为。所有运行与经典div。问题只是按钮相关。
这样呈现的原因是< button> 是一个替换的元素，至少在Gecko和替换元素的规则上 left：0; right：0 表示在CSS中不同于未替换的元素...
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.
The reason it renders like this is that <button> is a replaced element at least in Gecko and for replaced elements the rules on what left: 0; right: 0 means in CSS are different than they are for non-replaced elements...
这篇关于CSS：在Firefox中绝对定位一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
