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
Fire Fox:
document.body.clientHeight : 620
document.body.clientWidth : 1152
Почему существует это несоответствие?
Существуют ли какие-либо эквивалентные свойства, совместимые в разных браузерах (IE8, IE7, Firefox) без использования jQuery?
9 ответов
Это связано с блочной моделью браузера. Используйте что-то вроде jQuery или другую библиотеку абстракций JavaScript для нормализации модели DOM.
Пол А. прав насчет того, почему существует несоответствие, но решение, предлагаемое Ngm, неверно (в смысле JQuery).
Эквивалентом clientHeight и clientWidth в jquery (1.3) является
$(window).width(), $(window).height()
Элемент body принимает доступную ширину, которая обычно является окном просмотра вашего браузера. Таким образом, в браузере будут разные размеры из-за хромированных границ браузера, полос прокрутки, вертикального пространства, занимаемого меню, и еще много чего...
Тот факт, что высота также варьируется, также говорит мне, что вы устанавливаете высоту body/html на 100% через css, так как высота обычно зависит от элементов внутри тела.
Если вы не установили фиксированную ширину элемента body через css или его свойство style, его размеры, как правило, всегда будут отличаться для разных браузеров / версий и, возможно, даже в зависимости от плагинов, которые вы установили для браузера. Постоянные значения в таком случае являются скорее исключением из правила...
Когда вы вызываете.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 View Module, которая в настоящее время находится в стадии разработки. Хотя современные браузеры имеют последовательную реализацию этой спецификации, для обеспечения согласованной производительности на унаследованных платформах реализация jQuery все еще должна использоваться.
Дополнительная информация:
- https: //developer.mozilla [точка] орг / EN-US/ Docs / Web / API / Element.clientWidth
- https: //developer.mozilla [точка] орг / EN-US/ Docs/Web/API/Element.clientHeight
Что я сделал, чтобы исправить мою проблему с clientHeight, так это использовать clientHight элементов управления firstChild. Я использую IE 11 для печати меток из базы данных, а clientHeight, который работал в IE 8, возвращал в IE 11 высоту 0. Я нашел свойство в этом элементе управления, которое было указано в качестве firstChild и которое имело свойство if clientHeight и фактически имело высота, которую я искал. Так что, если ваш элемент управления возвращает clientSize 0, взгляните на свойство его firstChild. Это помогло мне...
Это может быть вызвано ошибкой блочной модели IE. Чтобы это исправить, вы можете использовать Box Model Hack.
Немного больше информации для окна браузера: http://www.w3schools.com/js/js_window.asp?output=print
У меня была похожая проблема - Firefox вернул правильное значение obj.clientHeight, но не вернул - он вернул 0. Я изменил его на obj.offsetHeight, и он работал. Кажется, есть некое состояние, то есть имеет значение для высоты клиента - это делает его ненадежным...