jQuery .height() problema con cromo

Question

He estado usando la función jQuery Height. Pero hubo un problema al obtener la altura correcta de mi elemento div. Esta altura del elemento div se establece en auto, lo que significa que la altura de div depende solo de los elementos que se encuentran dentro. Cuando he intentado usar el .height() en mi página, me dieron el siguiente resultado:

Chrome: 1276 px 
Firefox: 1424 px 

Pero cuando se les ve tanto tienen la misma altura. Lo único es que la función height() devuelve resultados diferentes.

Aquí está el código:

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;"> 
    <div>Sample Inside Element</div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    var less_height = $('.single-mid').height() -10; 
    $('.single-mid').height(less_height); 
}); 
</script> 

pero traté de establecer la altura del div en 1424px. Ambos navegadores devuelven el mismo resultado.

¿Alguna idea? Gracias por adelantado.

Answer 1

Parece ser causado por la fuente predeterminada diferente en los dos navegadores. Si se agrega el siguiente CSS a su ejemplo, el resultado será el mismo tanto para Firefox y Chrome/hierro:

<style type="text/css"> 
    div { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 2em; 
    } 
</style> 

Probablemente se podría utilizar un CSS reset y definir los estilos mismo. Esto le daría más control sobre cómo hacer que se vea igual en la mayoría de los navegadores.

Answer 2

Tenía el mismo problema. Pero si hice un breve retraso de setTimeout antes de hacer la verificación de nivel, Chrome comenzó a reportar la misma altura que Firefox. Parece que Chrome activa el estado listo para documentos antes de determinar completamente cómo el contenido alterará el tamaño real del contenedor ...!? En cualquier caso, mi solución era cambiar mi:

$(document).ready(... 

a un:

$(window).load(... 

que no gatillo hasta que "todos los sub-elementos han sido completamente cargada" (de http://api.jquery.com/load-event/).

Answer 3

Esto nos pasó a mí y la razón por la que algunas imágenes en el div que me calcularon la altura de no tenía el conjunto de atributos height.

$(window).load( funcionó para mí, pero causó demasiado retraso para lo que quería hacer.

Answer 4

Trate dos métodos de altura fija en cromo y el IE

jQuery(document).ready(function() { 
    // your code here 
}); 

Y

jQuery(window).load(function(){ 
    // your code here 
}); 

Answer 5

que tenía el mismo problema con el menú desplegable de arranque que los elementos tenían que ser de altura normalizada. Para algunos menús (no todos), jquery no devolvió la altura correcta, lo que dio como resultado una mala normalización. Fue porque los menús desplegables se ocultaron durante la normalización. Parece que CHROME y FIREFOX no calculan la altura correctamente cuando el elemento está oculto. IE parece funcionar mejor en este caso.

Para resolver el problema, tengo que añadir (a continuación, eliminar) la clase de arranque "abierta" a todos los menús, con el fin de hacerlos visibles durante la normalización:

$(window).on("load resize orientationchange", function() { 
     $(".dropdown").addClass("open"); 
     normalize_all(); 
     $(".dropdown").removeClass("open"); 
    });