ClientHeight/clientWidth, возвращающий разные значения в разных браузерах

Свойства document.body.clientHeight и document.body.clientWidth возвращают разные значения в IE7, IE8 и Firefox:

IE 8:

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7:

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

FireFox:

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

Почему это несоответствие существует?
Существуют ли эквивалентные свойства, совместимые в разных браузерах (IE8, IE7, Firefox) без использования jQuery?

Ответы

Ответ 1

Это связано с моделью браузера. Используйте что-то вроде jQuery или другой библиотеки абстракции JavaScript для нормализации модели DOM.

Ответ 2

Пол А прав, почему существует несоответствие, но решение, предлагаемое Ngm, неверно (в смысле JQuery).

В jQuery (1.3) эквивалент clientHeight и clientWidth

$(window).width(), $(window).height()

Ответ 3

Элемент body принимает доступную ширину, которая обычно является окном просмотра вашего браузера. Таким образом, это будет разные размеры кросс-браузера из-за границ браузера Chrome, полос прокрутки, вертикального пространства, занимаемого меню и еще чего...

Тот факт, что высоты также меняются, также говорит мне, что высота body/html до 100% через css, поскольку высота обычно зависит от элементов внутри тела > ..

Если вы не установите ширину элемента body в фиксированное значение через css или его свойство стиля, размеры будут, как правило, всегда меняться в разных браузерах/версиях и, возможно, даже в зависимости от подключаемых модулей установленный для браузера. Константные значения в этом случае являются скорее исключением из правила...

Когда вы вызываете .clientWidth на другие элементы, которые не принимают автоматическую ширину окна просмотра браузера, он всегда будет возвращать ширину элементов + дополнение. Таким образом, div с шириной 200 и заполнением 20 будет иметь clientWidth = 240 (20 дополнений влево и вправо).

Основная причина, однако, почему вы вызываете clientWidth, именно из-за возможных ожидаемых расхождений в результатах. Если вы знаете, что получите постоянную ширину и значение известно, то вызов clientWidth будет лишним...

Ответ 4

эквивалент offsetHeight и offsetWidth в jQuery равен $(window).width(), $(window).height() Это не clientHeight и clientWidth

Ответ 5

Element.clientWidth и Element.clientHeight верните высоту/ширину этого содержимого элемента в дополнение к любому применимому дополнению.

Реализация jQuery: $(target).outerWidth() и $(target).outerHeight()

.clientWidth и .clientHeight включены в спецификацию модуля CSSOM View Module, которая в настоящее время находится в рабочей стадии проекта. Хотя современные браузеры имеют последовательную реализацию этой спецификации, чтобы обеспечить постоянную производительность на устаревших платформах, реализация jQuery должна по-прежнему использоваться.

Дополнительная информация:

  • https://developer.mozilla [точка] орг /EN -US/Docs/Web/API/Element.clientWidth
  • https://developer.mozilla [точка] орг /EN -US/Docs/Web/API/Element.clientHeight

Ответ 6

Что я сделал, чтобы исправить мою проблему с clientHeight, это использовать clientHight элементов управления firstChild. Я использую IE 11 для печати меток из базы данных, а clientHeight, который работал в IE 8, возвращал высоту 0 в IE 11. Я нашел свойство в этом элементе управления, которое было указано как firstChild, и которое имело свойство if clientHeight и фактически имело которую я искал. Поэтому, если ваш элемент управления возвращает clientSize из 0, посмотрите на свойство его firstChild. Это помогло мне...

Ответ 7

Это может быть вызвано ошибкой модели IE box. Чтобы исправить это, вы можете использовать Box Model Hack.

Ответ 8

У меня была аналогичная проблема - firefox вернул правильное значение obj.clientHeight, но т.е. не вернул 0. Я изменил его на obj.offsetHeight, и он сработал. Кажется, есть какое-то состояние, которое имеет для clientheight - это делает его iffy...