Intentando alternativas fluidas para posicionamiento de bloques me encontré con un comportamiento de Firefox 18.0.1 (Mac OS X) verdaderamente extraño que consiste en que el margen superior asignado en valores porcentuales a un div con posición absoluta no se muestra correctamente, sino que toma una dimensión extraña que no es proporcional a la altura del parent.
Haciendo pruebas con javascript (jQuery) obtengo resultados que me hacen suponer que el margin-top, en Firefox, está siendo calculado como porcentaje del ancho de la ventana, en vez del alto, lo cual me parece un error demasiado grosero para que sea un bug, pero no encuentro otra respuesta.
Chrome 24 y Safari 5 responden perfectamente.
¿Podría alguien echarme una mano para resolver si es un bug de Firefox, alguna especificación que desconozco o si estoy haciendo algo mal?
Pego el código en cuestión.
Muchas gracias.
Código CSS :
<style type="text/css" media="screen">
html, body{
height:100%;
width:50%;
margin:0;
padding:0;
}
#encabezado{
position:absolute;
background-color:green;
margin:0;
height:25%;
width:100%;
}
#contenido{
background-color:blue;
position:absolute;
height:50%;
color:white;
margin-top:25%;
width:100%;
}
</style>
Código Javascript :
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" charset="utf-8">
function mostrar_informacion(){
margen_superior_del_contenido = parseInt($('#contenido').css('margin-top'));
marginTop = 'Margen superior del div: '+margen_superior_del_contenido+' ('+(margen_superior_del_contenido/0.25)+')\n';
alturaVentana = 'Altura de window: '+$(window).height()+'\n';
anchoVentana = 'Anchura de window: '+$(window).width()+'\n';
alert(marginTop+alturaVentana+anchoVentana);
}
</script>
Código HTML :
<!DOCTYPE html> ... <body> <div id="encabezado"></div> <div id="contenido"></div> </body>
