Problème jQuery .height() avec chrome

Question

J'ai utilisé la fonction jQuery Height. Mais il y avait un problème pour obtenir la bonne hauteur de mon élément div. La hauteur de cet élément div est définie sur auto, ce qui signifie que la hauteur de div dépend uniquement des éléments qui s'y trouvent. Quand j'ai essayé d'utiliser la .height() dans ma page, je suis arrivé le résultat suivant:

Chrome: 1276 px 
Firefox: 1424 px 

Mais quand vous les voyez à la fois ils ont la même hauteur. La seule chose est que la fonction height() renvoie un résultat différent.

Voici le code:

<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> 

Mais j'essayé de régler la hauteur de la div en 1424px. Les deux navigateurs renvoient le même résultat.

Des idées? Merci d'avance.

Answer 1

Il semble provenir de la police par défaut différente dans les deux navigateurs. Si vous ajoutez le CSS suivant votre exemple, le résultat sera le même pour Firefox et Chrome/fer:

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

Vous pouvez probablement utiliser un CSS reset et définir les styles vous-même. Cela vous donnerait plus de contrôle sur la façon de le faire ressembler à la plupart des navigateurs.

Answer 2

A eu le même problème. Mais si j'ai fait un bref délai de setTimeout avant de faire la vérification, chrome a commencé à signaler la même taille que firefox. Il semble que le chrome déclenche l'état prêt pour le document avant de déterminer complètement comment le contenu va modifier la taille réelle du conteneur ...!? En tout cas, ma solution était de changer ma:

$(document).ready(... 

à:

$(window).load(... 

qui ne déclenche pas jusqu'à ce que « tous les sous-éléments ont été complètement chargé » (de http://api.jquery.com/load-event/).

Answer 3

Cela m'est arrivé et la raison pour laquelle que certaines images dans le div que je calculais la hauteur de n'ont pas l'ensemble d'attributs height.

$(window).load( a travaillé pour moi, mais a causé trop de retard pour ce que je voulais faire.

Answer 4

Essayez deux méthode hauteur fixe en chrome et IE

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

Et

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

Answer 5

J'ai eu le même problème avec menu déroulant bootstrap que les éléments devaient être la hauteur normalisée. Pour certains menus (pas tous), jquery n'a pas retourné la bonne hauteur, entraînant une mauvaise normalisation. C'était parce que les menus déroulants étaient cachés pendant la normalisation. Il semble que CHROME et FIREFOX ne calculent pas la hauteur correctement lorsque l'élément est caché. IE semble mieux fonctionner dans ce cas.

Pour résoudre le problème, j'ajouter (puis retirez) la classe d'amorçage « ouvert » à tous les menus, afin de les rendre visibles lors de la normalisation:

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