clientHeight / clientWidth retornando valores diferentes em diferentes navegadores

Question

Propriedades document.body.clientHeight e retorno document.body.clientWidth valores diferentes no IE7, IE8 e Firefox:

IE 8:

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

IE 7:

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

O Firefox:

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

Por que Será que isso existe discrepância?
Existem quaisquer propriedades equivalentes que são consistentes em diferentes navegadores (IE8, IE7, Firefox) sem usar jQuery?

Answer 1

Isto tem a ver com o modelo de caixa do navegador. Use algo como jQuery ou outra biblioteca de abstração JavaScript para normalizar o modelo DOM.

Answer 2

Paul Um está certo sobre por que existe a discrepância, mas a solução oferecida pelo Ngm está errado (no sentido de JQuery).

O equivalente de clientHeight e clientWidth em jquery (1.3) é

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

Answer 3

O corpo elemento leva a largura disponível, que normalmente é viewport seu browser. Como tal, será diferentes dimensões cross browser devido às fronteiras cromo navegador, barras de rolagem, espaço vertical ser ocupam pelos menus e outros enfeites ...

O fato de que as alturas também variam, também me diz que você definir o body / html altura a 100% através de css desde a altura é geralmente dependente de elementos dentro do corpo ..

A menos que você defina a largura do corpo elemento para um valor fixo através de CSS ou é propriedade de estilo, é dimensões, regra geral, sempre variar navegadores Cross / versões e talvez até mesmo dependendo plugins que você instalado para o navegador. valores constantes em tal caso é mais uma exceção à regra ...

Quando você invocar .clientWidth sobre outros elementos que não levam a largura automática da janela de exibição do navegador, ele sempre retornará os elementos 'largura' + 'padding'. Assim, um div com largura de 200 e uma cobertura de 20 terá clientWidth = 240 (20 preenchimento à esquerda e à direita).

A principal razão no entanto, por que alguém iria invocar clientWidth, é exatamente devido a possíveis discrepâncias esperadas nos resultados. Se você sabe que vai ter uma largura constante e o valor é conhecido, em seguida, invocando clientWidth é redundante ...

Answer 4

O equivalente a offsetHeight e offsetWidth em jQuery é $ (Janela) .width (), $ (janela) .height () Não é a clientHeight e clientWidth

Answer 5

Element.clientWidth & Element.clientHeight voltar a altura / largura do que o conteúdo do elemento para além de qualquer preenchimento aplicável.

A implementação jQuery delas são: $(target).outerWidth() & $(target).outerHeight()

.clientWidth & .clientHeight estão incluídas na especificação CSSOM Ver módulo que está atualmente em fase de projecto a trabalhar. Enquanto os navegadores modernos têm uma aplicação coerente desta especificação, para garantir um desempenho consistente em todas as plataformas legadas, a implementação jQuery ainda deve ser usada.

Informações adicionais:

• 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 6

O que eu fiz para corrigir o meu problema com clientHeight é usar o clientHight dos controles firstChild. Eu uso o IE 11 para imprimir etiquetas a partir de um banco de dados eo clientHeight que trabalhou no IE 8 voltava a altura de 0 no IE 11. Eu encontrei uma propriedade em que o controle que foi listado como firstChild e que tinha uma propriedade se clientHeight e realmente tinha a altura que eu estava procurando. Portanto, se seu controle é retornar um ClientSize de 0 Dê uma olhada na propriedade de seu firstChild. Ele me ajudou ...

Answer 7

i teve um problema semelhante - firefox devolveu o valor correto de obj.clientHeight mas isto fez não- retornou 0. eu mudei para obj.offsetHeight e funcionou. Parece que há algum estado que isto tem para clientHeight - que torna duvidoso ...

Answer 8

Pode ser causada por erro modelo de caixa do IE. Para corrigir isso, você pode usar o hack Modelo de Caixa .

Answer 9

Alguns mais informações para a janela do navegador: http://www.w3schools.com/js/js_window.asp?output=print