html - link - CSS: posicionamiento absoluto de un botón en Firefox
buttons html (3)
Quiero mostrar un botón que toma todos los espacios de su matriz, que es él mismo el que está en la 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 un comentario si se ejecuta o no, sería realmente bueno)).
El objetivo a lograr es:
Div y botón están juntos contenidos por un contenedor que está posicionado en forma absoluta.
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 renderiza así:
¿Tienes alguna idea de por qué Firefox procesa este código así y tienes alguna solución utilizando un posicionamiento similar?
EDITAR: No puedo (y no quiero) establecer el ancho y la altura en el niño interno. La razón es que uso GWT con mecanismos de diseño. El diseño GWT utiliza 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.
Establezca un ancho y alto para el div interno también.
La razón por la cual se presenta así es que <button> 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 de lo que son para elementos no reemplazados ...
Prueba agregar
min-width: -moz-available;
a la declaración .inner .
Descubrí 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.