CSS: posicionamiento absoluto de un botón en Firefox

Quiero mostrar un botón que ocupa todos los espacios de su principal que es él mismo el que está en la posición absoluta.CSS: posicionamiento absoluto de un botón en Firefox

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

El objetivo a alcanzar es:

enter image description here

Div y el botón están juntos contenían por una envoltura que es absoluto situado.

El código HTML es:

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

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

enter image description here

¿Tienes alguna idea de por qué Firefox hace que este código como este y ¿Tienes alguna solución usando posicionamiento similar?

EDITAR: No puedo (y no quiero) configurar el ancho y la altura en el interior del niño. La razón es que uso GWT con mecanismos de diseño. El diseño GWT usa la parte inferior/superior/izquierda/derecha para posicionar y dimensionar elementos, por lo que no puedo cambiar este comportamiento. Todo funciona con div clásico. El problema solo está relacionado con los botones.

Fuente

2011-09-01 Jerome Cance

Tener usted intentó configurar display: block? –

sí, he probado antes de preguntar. No hace nada –

La razón que hace que este tipo es que <button> es un elemento reemplazado por lo menos en Gecko y de elementos reemplazados las reglas en lo que significa left: 0; right: 0 en CSS son diferentes de lo que son para los elementos no reemplazados ...

Fuente

2011-09-02 20:44:09

bien, los elementos reemplazados parecen ser la causa de este problema. Gracias ! Información adicional sobre los elementos reemplazados: http://reference.sitepoint.com/css/replacedelements –

Esta es la explicación del problema. ¿Hay alguna solución para este tipo de problema? (Prefiero usar botones ya que alinea el texto en el medio). –

Puede usar 'left: 0; ancho: 100%; ' –

Establezca un ancho y alto para el div interno también.

Fuente

2011-09-01 14:12:58

No puedo usar ancho o alto porque utilizo el mecanismo de diseño GWT que usa bottom/top/left/right para configurar tamaños –

@ Jerome: ¿Cómo es más difícil escribir 'width: 100%' y 'height: 100% 'que' derecho: 0' y 'abajo: 0'? – Wabbitseason

Prueba "flotar: izquierda;" en lugar de "posición, arriba, abajo, izquierda, derecha" en .inner. –

Trate de añadir

min-width: -moz-available;

a la declaración .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 de la misma manera que lo hace originalmente en Firefox.

Fuente

2011-09-01 14:39:15 Wabbitseason

Esto soluciona el problema en firefox. ¡A nadie le importa la ópera, ya que la ópera está 100% sin usar (al menos en mi sitio) y se está mudando a Webkit! –

CSS: posicionamiento absoluto de un botón en Firefox

Respuesta

Cuestiones relacionadas