¿Propiedad de altura de Chrome CSS diferente de Firefox?

Estoy tratando de mostrar un pequeño bloque que en realidad es una imagen .png.

Configuré las propiedades de la imagen del pequeño bloque usando css para que tuviera un 2 % de ancho y un 2 % de alto.

Esta imagen está dentro del cuerpo, que está configurado al 100 % de ancho y al 100 % de alto.

Mi problema es que la imagen sale correctamente en firefox, como en parece un cuadrado, pero en Chrome parece un rectángulo. El ancho de la imagen parece ser correcto (2 %), pero la altura parece no ser correcta.

Aquí hay fotos para ilustrar mi ejemplo:

Firefox: (esto es lo que quiero)

enter image description here

Chrome: (esto es lo que no quiero. Quiero que se vea como se ve en Firefox).

enter image description here

Estoy usando html con javascript dentro y css y aquí está mi código:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testlayout.css" />
<script>    

var x;

function myFunction()
{                   
    var img = new Image(); 
    img.src = 'bgimage.png';
    document.body.appendChild( img );                                       
};

</script>
</head>
<body onload="myFunction()"> 

</body>
</html>

Y aquí está mi css:

body
{
margin:0; padding: 0; cellspacing: 0;
line-height: 0;  /* removes gap betwen rows */
height: 100%;
width: 100%;
}

img
{
height: 2%;
width: 2%;
}

Eso es todo. Si saben cuál es el problema, háganmelo saber, cualquier ayuda será muy apreciada. ¡Gracias!

preguntado el 13 de septiembre de 12 a las 06:09

3 Respuestas

Los tamaños de ventana en Firefox y Chrome pueden diferir. En este tipo de situaciones, utilice valores de píxel en lugar de porcentajes.

img 
{
    height: 50px;
    width: 50px;
}

Respondido el 13 de Septiembre de 12 a las 06:09

intente agregar un * {margin:0;padding:0} al comienzo de su archivo css.

También considere agregar un restablecimiento de CSS

editar:

Ahora que lo pienso, ¿estás seguro de que bgimage.png existe en ese directorio? También puede intentar configurar img.width y img.height dentro de tu javascript algo así

http://jsfiddle.net/2Uk53/1/

Respondido el 13 de Septiembre de 12 a las 06:09

Su cuerpo puede estar configurado para height: 100%, pero su contenedor principal (html) no lo es.

Respondido el 13 de Septiembre de 12 a las 13:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.