Проблема jQuery.height() с хромом

Я использую функцию jQuery Height. Но возникла проблема в получении правильной высоты моего элемента div. Эта высота элемента div установлена на auto, что означает, что высота div зависит только от элементов внутри нее. Когда я попытался использовать .height() на моей странице, я получил следующий результат:

Chrome: 1276 px
Firefox: 1424 px

Но когда вы видите их обоих, они имеют равную высоту. Единственное, что функция height() возвращает другой результат.

Здесь код:

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

Но я попытался установить высоту div в 1424px. Оба браузера возвращают тот же результат.

Любые идеи? Спасибо заранее.

Ответ 1

Была та же проблема. Но если я сделал короткую задержку setTimeout, прежде чем делать проверку высоты, хром начал сообщать о такой же высоте, как и firefox. Кажется, хром запускает состояние готовности документа до полного определения того, как содержимое изменит фактический размер контейнера...!? В любом случае, мое исправление заключалось в изменении my:

$(document).ready( ...

to:

$(window).load( ...

который не запускается до тех пор, пока все подэлементы не будут полностью загружены (из http://api.jquery.com/load-event/).

Ответ 2

Кажется, это вызвано разным шрифтом по умолчанию в двух браузерах. Если вы добавите в свой пример следующий CSS, результат будет таким же, как для Firefox, так и для Chrome/Iron:

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

Возможно, вы можете использовать CSS reset и сами определять стили. Это даст вам больше контроля над тем, как заставить его выглядеть одинаково в большинстве браузеров.

Ответ 3

Это случилось со мной и причиной того, что некоторые изображения в div, которые я вычислял высотой, не имели набора атрибутов height.

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

Ответ 4

Попробуйте два метода для фиксированной высоты в chrome и IE

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

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

Ответ 5

У меня была такая же проблема с выпадающим меню bootstrap, что элементы должны были быть нормированы по высоте. Для некоторых меню (не для всех) jquery не вернул правильную высоту, что привело к плохой нормализации. Это связано с тем, что выпадающие меню были скрыты во время нормализации. Кажется, что CHROME и FIREFOX не правильно вычисляют высоту, когда элемент скрыт. В этом случае IE работает лучше.

Чтобы решить проблему, я добавляю (затем удаляю) класс начальной загрузки "open" ко всем меню, чтобы сделать их видимыми во время нормализации:

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