clientHeight / clientWidth que devuelve diferentes valores en diferentes navegadores

StackOverflow https://stackoverflow.com/questions/833699

Pregunta

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?

¿Fue útil?

Solución

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.

Otros consejos

Paul A tiene razón sobre 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()

El elemento cuerpo toma el ancho disponible, que generalmente es la ventana de visualización de su navegador. Como tal, serán 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 demás ...

El hecho de que las alturas también varían, también me dice que establezca la altura body / html al 100% a través de css, ya que la altura generalmente depende de 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, como regla, siempre variarán entre navegadores / versiones cruzadas y tal vez incluso dependiendo de los complementos que instalado 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 ...

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

Element.clientWidth & amp; Element.clientHeight devuelve el alto / ancho del contenido de ese elemento además de cualquier relleno correspondiente.

La implementación de jQuery de estos son: $ (target) .outerWidth () & amp; $ (target) .outerHeight ()

.clientWidth & amp; .clientHeight están incluidos en la especificación del Módulo de Vista CSSOM que se encuentra actualmente en la etapa de borrador de trabajo. Si bien los navegadores modernos tienen una implementación consistente de esta especificación, para asegurar un rendimiento consistente en las plataformas heredadas, la implementación de jQuery aún debe usarse.

Información adicional:

  • https: //developer.mozilla [dot] org / en-US / docs / Web / API / Element.clientWidth
  • https: //developer.mozilla [dot] org / en-US / docs / Web / API / Element.clientHeight

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ó ...

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 un estado que tiene, por ejemplo, la altura del cliente, lo que lo hace dudoso ...

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

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top