jQuery.height() calcula distintos tamaños entre navegadores [solución]
Este es un tip rápido pero útil.
Escenario:
Tenes un div con el id “elDiv” con el siguiente CSS:
|
1 2 3 4 5 6 |
#elDiv { border: 1px solid #336699; float: right; padding: 20px; width: 500px; } |
Y en Firefox/Chrome/Safari/Opera al hacer $(“#elDiv”).height(); te entrega 400px por decir algo (el tamaño depende de lo que tenga dentro).
Pero curiosamente en Internet explorer te da un tamaño raro… de menos, unos 358px en nuestro ejemplo.
¿Qué pasa?
Pasa que no le especificaste un modo de renderizado al HTML por medio del DOCTYPE, y por culpa de ello Internet explorer va a renderizar el contenido en modo “Quirks Mode” http://es.wikipedia.org/wiki/Quirks_Mode.
Si no queres leer el articulo de Wikipedia te comento que lo único que tenes que hacer es poner lo siguiente por encima del tag <html>:
|
1 |
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> |
PD: el valor de 358px en mi ejemplo viene de que en modo quirks, IE toma el tamaño del tamaño real menos el padding y el borde: 400 - 40 - 2 = 358.
