Расчет высоты с использованием jQuery отличается в Firefox и Chrome

Question

У меня есть вопрос, который уже задавался здесь , но предложенное там решение не сработало. Проблема в том, что я использую функцию jQuery height (), чтобы вернуть высоту div. Он хорошо работает в Firefox, но в Chrome возвращает значение на 300px меньше ...

Вы можете увидеть пример этой ошибки здесь . Хотя я должен сказать, что это на иврите. Хотя это не должно иметь большого значения ...

Кто-нибудь имел это раньше? Вот код, который вычисляет высоту:

var heightLeftCol = $('#leftCol').height();
var sidebarHeight = $('#sidebar').height();
var minHeight = heightLeftCol > sidebarHeight ? heightLeftCol : sidebarHeight; 
$('#postArea').css('min-height', minHeight+100);

РЕДАКТИРОВАТЬ: Эта проблема была не исправлена ​​, но работал вокруг таким образом, что мне не нравится, но это будет сейчас Вот «решение», которое я придумала:

if (jQuery.browser.safari) {
    $('#postArea').css('min-height', minHeight+400 + 'px');
}
else {
    $('#postArea').css('min-height', minHeight+100 + 'px');
}

Поскольку Safari и Chrome работают на WebKit, browser.safari фактически также выбирает Chrome ... Я определенно не считаю это оптимальным решением.

Спасибо! Amit

Answer 1

В Chrome высота div не включает высоту вашего 300-пиксельного изображения "sheli.jpg", поскольку оно не указано нигде в html или css. Если вы укажете height="300" в своем теге или height: 300px; как часть его стиля, он будет работать.

Answer 2

Если это потому, что ваше изображение в то время еще не загружено, значит, высота равна 0. Это объясняет дефицит высоты, который вы получили в Chrome. Чтобы решить эту проблему, поместите фрагмент кода, который устанавливает высоту внутри jQuery(window).load(), например:

jQuery(window).load(function(){
     jQuery("#div1").css("height", jQuery("#div2").height());
});

Answer 3

Согласно обсуждению, которое было у нас с Джастином в комментариях выше, перенос кода jQuery в $ (window) .load () позволит правильно выполнить этот код после полной загрузки изображений.