Problem jQuery .height() z chromem

Question

Używam funkcji jQuery Height. Wystąpił jednak problem z uzyskaniem prawidłowej wysokości elementu div. Ta wysokość elementu div jest ustawiona na auto, co oznacza, że ​​wysokość div zależy tylko od jej wewnętrznych elementów. Kiedy próbowałem za pomocą .height() w moją stronę, mam następujący wynik:

Chrome: 1276 px 
Firefox: 1424 px 

Ale kiedy je zobaczyć oba mają jednakową wysokość. Jedyną rzeczą jest, że funkcja height() zwraca inny wynik.

Oto kod:

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

Ale starałem się ustawić wysokość div jest do 1424px. Obie przeglądarki zwracają ten sam wynik.

Wszelkie pomysły? Z góry dziękuję.

Answer 1

Wydaje się, że przyczyną jest inna domyślna czcionka w obu przeglądarkach. Jeśli dodać następujący kod CSS na swoim przykładzie, wynik będzie taki sam zarówno dla Firefox i Chrome/żelaza:

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

Można chyba użyć CSS reset i definiować style siebie. Zapewni to większą kontrolę nad tym, jak sprawić, aby wyglądał tak samo w większości przeglądarek.

Answer 2

Miał ten sam problem. Ale jeśli zrobiłem krótkie opóźnienie setTimeout przed wykonaniem testu wysokości, chrome zaczęło zgłaszać tę samą wysokość co Firefox. Wygląda na to, że chrome uruchamia stan gotowości dokumentu, zanim w pełni zdecyduje, w jaki sposób zawartość zmieni rzeczywisty rozmiar pojemnika ...!? W każdym razie, moja poprawka była zmiana moim:

$(document).ready(... 

do a:

$(window).load(... 

który nie powoduje aż „wszystkie podrzędne elementy zostały całkowicie załadowany” (z http://api.jquery.com/load-event/).

Answer 3

To mi się przydarzyło i powód, dla którego niektóre obrazy w div, w którym obliczyłem wysokość, nie miały ustawionego atrybutu height.

$(window).load( pracowała dla mnie, ale spowodowała zbyt duże opóźnienie w tym, co chciałem zrobić.

Answer 4

Spróbuj dwie metody na stałej wysokości w Chrome i IE

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

I

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

Answer 5

miałem ten sam problem z bootstrap rozwijanego menu, które elementy musiały być wysokość znormalizowane. W przypadku niektórych menu (nie wszystkich) jQuery nie zwrócił prawidłowej wysokości, powodując nieprawidłową normalizację. Było tak dlatego, że menu rozwijane były ukryte podczas normalizacji. Wygląda na to, że CHROME i FIREFOX nie obliczają wysokości poprawnie, gdy element jest ukryty. IE wydaje się działać lepiej w tym przypadku.

Aby rozwiązać ten problem, muszę dodać (wyjmij) klasy bootstrap „otwarty” do wszystkich menu, tak aby były widoczne podczas normalizacji:

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