Las propiedades document.body.clientHeight y document.body.clientWidth devuelven valores diferentes en IE7, IE8 y 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

¿Por qué existe esta discrepancia?
¿Hay propiedades equivalentes que sean consistentes en diferentes navegadores (IE8, IE7, Firefox) sin usar jQuery?

24
nmdr 7 may. 2009 a las 13:30

8 respuestas

La mejor respuesta

Esto tiene que ver con el modelo de caja del navegador. Use algo como jQuery u otra biblioteca de abstracción de JavaScript para normalizar el modelo DOM.

5
Paul Alexander 7 may. 2009 a las 09:33

El equivalente de offsetHeight y offsetWidth en jQuery es $ (window) .width (), $ (window) .height () No es el clientHeight y clientWidth

3
Niels Steenbeek 25 feb. 2010 a las 13:03

Lo que hice para solucionar mi problema con clientHeight es usar clientHight de los controles firstChild. Utilizo IE 11 para imprimir etiquetas desde una base de datos y el clientHeight que funcionaba en IE 8 devolvía la altura de 0 en IE 11. Encontré una propiedad en ese control que figuraba como firstChild y que tenía una propiedad si clientHeight y realmente tenía La altura que estaba buscando. Entonces, si su control está devolviendo un clientSize of 0, eche un vistazo a la propiedad de su firstChild. Me ayudó...

1
Lee Ann Davidson 10 feb. 2015 a las 19:17

Paul A tiene razón acerca de por qué existe la discrepancia, pero la solución ofrecida por Ngm es incorrecta (en el sentido de JQuery).

El equivalente de clientHeight y clientWidth en jquery (1.3) es

$(window).width(), $(window).height()
24
arajek 15 sep. 2009 a las 21:47

Puede ser causado por el error del modelo de caja de IE. Para solucionar esto, puede usar el Box Model Hack.

0
Lee Taylor 2 sep. 2013 a las 03:45

El elemento cuerpo toma el ancho disponible, que generalmente es la ventana de visualización de su navegador. Como tal, habrá diferentes dimensiones del navegador cruzado debido a los bordes cromados del navegador, las barras de desplazamiento, el espacio vertical que ocupan los menús y otras cosas ...

El hecho de que las alturas también varían, también me dice que establezca la altura body / html en 100% a través de css, ya que la altura generalmente depende de los elementos dentro del cuerpo .

A menos que establezca el ancho del elemento cuerpo en un valor fijo a través de css o su propiedad de estilo, sus dimensiones, por regla general, siempre variarán entre navegadores / versiones cruzadas y tal vez incluso dependiendo de los complementos que instaló para el navegador. Los valores constantes en tal caso son más una excepción a la regla ...

Cuando invocas .clientWidth en otros elementos que no toman el ancho automático de la ventana gráfica del navegador, siempre devolverá los elementos 'ancho' + 'relleno'. Por lo tanto, un div con un ancho de 200 y un relleno de 20 tendrá clientWidth = 240 (20 rellenos a izquierda y derecha).

Sin embargo, la razón principal por la que uno invocaría clientWidth se debe exactamente a las posibles discrepancias esperadas en los resultados. Si sabe que obtendrá un ancho constante y el valor es conocido, entonces invocar clientWidth es redundante ...

5
BGerrissen 3 ago. 2010 a las 09:55

Alguna información más para la ventana del navegador: http://www.w3schools.com/js/js_window.asp?output=print

0
Biranchi 15 sep. 2013 a las 05:36

Tuve un problema similar: Firefox devolvió el valor correcto de obj.clientHeight pero es decir, no devolvió 0. Lo cambié a obj.offsetHeight y funcionó. Parece que hay algún estado que tiene, por ejemplo, la altura del cliente, lo que lo hace dudoso ...

0
Johnny Darvall 4 jul. 2010 a las 14:59