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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

Их реализация в jQuery такова:$(target).outerWidth() & $(target).outerHeight()

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

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

• https://developer.mozilla [точка]org/ru-US/docs/Web/API/Element.clientWidth
• https://developer.mozilla [точка]org/ru-US/docs/Web/API/Element.clientHeight

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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