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

Question

Я использую функцию высоты jQuery. Но была проблема с получением правильной высоты моего элемента 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. Оба браузера возвращают один и тот же результат.

Есть идеи? Заранее спасибо.

Answer 1

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

$(document).ready( ...

на:

$(window).load( ...

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

Answer 2

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

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

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

Answer 3

У меня была такая же проблема, когда я использовал шрифт из Google Fonts, и он неявно установил высоту строки 1,5em, которую jQuery, вероятно, не видел. Как только я явно написал line-height: 1.5em для моего сброса CSS (или настройки шрифта сайта), все было в порядке.

Answer 4

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

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

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

Answer 5

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

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

И

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

Answer 6

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

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