clientHeight / clientWidth, возвращающие разные значения в разных браузерах
-
08-07-2019 - |
Вопрос
Свойства 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?
Решение
Это связано с блочной моделью браузера. Используйте что-то вроде jQuery или другую библиотеку абстракций JavaScript для нормализации модели DOM.
Другие советы
Пол А прав в том, почему существует несоответствие, но решение, предлагаемое Ngm, неверно (в смысле JQuery).
Эквивалент clientHeight и clientWidth в jquery (1.3) равен
$(window).width(), $(window).height()
Элемент body принимает доступную ширину, которая обычно является окном просмотра вашего браузера. Таким образом, в браузере будут разные размеры из-за хромированных границ браузера, полос прокрутки, вертикального пространства, занимаемого меню, и тому подобного ...
Тот факт, что высота также варьируется, также говорит мне, что вы устанавливаете высоту body / html на 100% через css, поскольку высота обычно зависит от элементов внутри тела ..
Если вы не установили ширину элемента body на фиксированное значение с помощью css или его свойства стиля, его размеры, как правило, всегда будут отличаться для разных браузеров / версий и, возможно, даже в зависимости от используемых вами плагинов. установлен для браузера. Постоянные значения в таком случае являются скорее исключением из правила ...
Когда вы вызываете .clientWidth для других элементов, которые не принимают автоматическую ширину окна просмотра браузера, он всегда будет возвращать элементы 'width' + 'padding'. Таким образом, div с шириной 200 и отступом 20 будет иметь clientWidth = 240 (отступы 20 слева и справа).
Однако основная причина, по которой можно вызывать clientWidth, заключается именно в возможных ожидаемых расхождениях в результатах. Если вы знаете, что получите постоянную ширину и значение известно, то вызов clientWidth является избыточным ...
Эквивалент offsetHeight и offsetWidth в jQuery: $ (window) .width (), $ (window) .height () Это не clientHeight, а clientWidth
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
Что я сделал, чтобы исправить мою проблему с clientHeight, так это использовать clientHight элементов управления firstChild. Я использую IE 11 для печати меток из базы данных, а clientHeight, который работал в IE 8, возвращал в IE 11 высоту 0. Я нашел свойство в этом элементе управления, которое было указано в качестве firstChild и которое имело свойство if clientHeight и фактически имело высота, которую я искал. Так что, если ваш элемент управления возвращает clientSize 0, взгляните на свойство его firstChild. Это помогло мне ...
У меня была похожая проблема - firefox вернул правильное значение obj.clientHeight, но не вернул - он вернул 0. Я изменил его на obj.offsetHeight, и это сработало. Кажется, есть какое-то состояние, которое имеет отношение к высоте клиента - это делает его ненадежным ...
Это может быть вызвано ошибкой блочной модели IE. Чтобы это исправить, вы можете использовать Hack Box Model Hack .
Дополнительная информация для окна браузера: http://www.w3schools.com/js/js_window.asp?output=print р>