CSS: posicionamiento absoluto de un botón en Firefox

Quiero mostrar un botón que ocupa todos los espacios de su padre, que se encuentra en una posición absoluta.

Pero parece que Firefox tiene un error (todo funciona perfectamente en Chrome y Safari (Webkits), no puedo probar en IE porque estoy en mac) (si alguien puede probar y decir en el comentario si se ejecuta o no, sería muy bonito)).

El objective a alcanzar es:

introduzca la descripción de la imagen aquí

La división y el botón están juntos por una envoltura que está en posición absoluta.

El código HTML es:

    .wrapper { background-color: red; position: absolute; width: 100px; height: 100px; } .inner { background-color: blue; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; }    
div

Eso es bastante simple. El problema es que en Firefox, se muestra así:

introduzca la descripción de la imagen aquí

¿Tienes alguna idea de por qué Firefox reproduce este código de esta manera y tienes alguna solución alternativa utilizando un posicionamiento similar?

EDITAR: No puedo (y no quiero) establecer el ancho y la altura en el niño interior. La razón es que uso GWT con mecanismos de diseño. El diseño de GWT utiliza los elementos inferior / superior / izquierdo / derecho para colocar y dimensionar los elementos, por lo que no puedo cambiar este comportamiento. Todo corre con div clásico. El problema es solo el botón relacionado.

La razón por la que se muestra así es que es un elemento reemplazado al menos en Gecko y para los elementos reemplazados las reglas sobre lo que left: 0; right: 0 left: 0; right: 0 significa que en CSS son diferentes a los elementos no reemplazados …

Intenta agregar

 min-width: -moz-available; 

a la statement .inner .

He encontrado que funciona incluso en Internet Explorer 7+. En IE6 falla pero no es una sorpresa. Desafortunadamente, también falla en Opera exactamente como lo hace originalmente en Firefox.

Establecer un ancho y alto para el div interior también.