clientHeight / clientWidth возвращает разные значения в разных браузерах

Question

Свойства 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?

Answer 1

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

Эквивалент clientHeight и clientWidth в jquery (1.3) равен

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

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

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

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

• https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientWidth
• https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientHeight

Answer 7

Дополнительная информация для окна браузера: http://www.w3schools.com/js/js_window.asp?output=print

Answer 8

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

Answer 9

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