CSS : absolute positioning of a button in Firefox

问题

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.

回答1:

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...

回答2:

Try adding

min-width: -moz-available;

to the .inner declaration.

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.

回答3:

Set a width and height for the inner div also.

来源：https://stackoverflow.com/questions/7271561/css-absolute-positioning-of-a-button-in-firefox

标签

html

css

firefox

cross-browser