jQuery .width() y .height() comportamiento extraño

¿Por qué en el following code. Hechizo() devuelve 95 en lugar de 100, mientras que .width() devuelve 200 como se esperaba? Yo trabajo con Firefox 3.6.3.jQuery .width() y .height() comportamiento extraño

HTML:

<table><tr> 
    <td id="my"></td> 
</tr></table> 
<div id="log"></div>

CSS:

#my { 
    border: 5px solid red; 
}

JS:

$("#my").width(200).height(100); 
$("#log").append("Width = " + $("#my").width() + "<br />"); 
$("#log").append("Height = " + $("#my").height());

me trataron .outerWidth() y .outerHeight() y también .innerWidth() y. innerHeight(), pero ninguno de ellos devuelve el resultado esperado: code example

Pero, si configuro position: absolute parece much better!

¿Alguien puede explicar este comportamiento?

Fuente

2010-05-18 Misha Moroshko

En Google Chrome 4.1.249.1064, obtengo la altura 95 y el ancho 195. – hwiechers

Esto es un problema del navegador o un problema con la presencia de otro CSS. En Google Chrome 6.0.401.1 dev, obtuve los resultados esperados. http://jsbin.com/omefu/2 – Matchu

@Misha: Las inconsistencias son causadas por el relleno predeterminado de la tabla/td. Ver la respuesta actualizada a continuación :). –

Hay algunos métodos de jQuery para el cálculo de la altura y la anchura. Trate de usar outerHeight()

Extracto de jQuery Docs: http://api.jquery.com/outerHeight/

.outerHeight([ includeMargin ])

includeMargin - Un booleano que indica si se debe incluir margen del elemento en el cálculo.

http://api.jquery.com/innerHeight/

.innerHeight()

Este método devuelve la altura del elemento de , incluyendo la parte superior e inferior relleno, en píxeles.

Editar: altura Marco() en el elemento td se ajusta para incluir el relleno por defecto (1 píxel). Las dimensiones calculadas de son en realidad ...

alt text http://files.wordofjohn.com/with_border.png

debe establecer el relleno por defecto a 0px para evitar estos problemas.

table td { 
    padding: 0; 
}

Edición 2: Parece ser un problema del navegador (probablemente algo relacionado con el método de cálculo de las dimensiones de una tabla del motor de renderizado). Los efectos de este comportamiento variarán entre navegadores. Debería encontrar una solución alternativa, sin tablas, que use divs.

Fuente

2010-05-18 15:07:23

funciones externas e internas no ayuda aquí. Ver pregunta actualizada –

Traté de establecer el relleno = 0 de 'td', pero no ayudó. ver la pregunta actualizada –

Esto es exactamente lo que decidí hacer: encontrar otra solución usando 'div's :) –

No estoy seguro de esto ... También me parece bastante extraño ... Esta es mi suposición.

La frontera se come a la altura real y se descuida por jQuery, mientras que el cálculo de la altura

Fuente

2010-05-18 15:05:28 ZX12R

El modelo de caja moderna no hace eso. Tal vez es un problema IE6 ... pero ¿no deberían ser 190 y 90 si ese es el caso? – Matchu

sí, usted tiene un punto válido – ZX12R

, la pregunta es por qué el ancho y la altura se comportan de manera diferente. Espero que ambos incluyan o no el borde/relleno/márgenes. –

Realmente no puedo explicar este comportamiento mejor que John, pero como esta incoherencia del navegador aún persiste (al menos para aquellos que no pueden actualizar la versión de jQuery), pensé que podría compartir una solución para este problema.

Usando las propiedades DOM HTML clientHeight y ClientWidth parece ser consistente durante la mayoría de los navegadores.

$("#my").width(200).height(100); 
$("#log").append("Width = " + $("#my").attr("clientWidth") + "<br />"); 
$("#log").append("Height = " + $("#my").attr("clientHeight"));

Es probable también que es posible que desee utilizar offsetHeight/offsetWidth lugar, dependiendo de lo que necesita.

Fuente

2016-01-21 01:07:07 user2257275

jQuery .width() y .height() comportamiento extraño

Respuesta

Cuestiones relacionadas