jQuery .width() ve .height() garip davranışı

Neden following code .height() 100 yerine 100 değerini döndürürken .width() 200 beklendiği gibi geri dönüyor? Firefox 3.6.3 ile çalışıyorum.jQuery .width() ve .height() garip davranışı

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());

Ben .outerWidth() ve .outerHeight() ve ayrıca .innerWidth() ve çalıştı. innerHeight(), ancak bunların hiçbiri beklenen sonucu döndürmez: code example

Ancak, position: absolute'u ayarladıysam much better görünüyor!

Bu davranışı herkes açıklayabilir mi?

kaynak

2010-05-18 Misha Moroshko

Google Chrome 4.1.249.1064'de, yükseklik 95 ve genişlik 195 elde ediyorum. – hwiechers

Bu, bir tarayıcı sorunu veya mevcut diğer CSS ile ilgili bir sorun. Google Chrome 6.0.401.1 devresinde, beklenen sonuçlara ulaştım. http://jsbin.com/omefu/2 – Matchu

@Misha: Tutarsızlıklar tablo/td'nin varsayılan dolgularından kaynaklanıyor. Aşağıdaki güncellenmiş cevabı görmek :). –

hesaplanırken yükseklik ve genişlik hesaplanması için birkaç jQuery yöntem vardır jquery tarafından ihmal edilir. jQuery Dokümanlarınızdan outerHeight()

alıntıyı kullanmayı deneyin: http://api.jquery.com/outerHeight/

.outerHeight([ includeMargin ])

includeMargin - hesaplamada öğenin marjını dahil edip belirten bir Boole. http://api.jquery.com/innerHeight/

.innerHeight()

Bu yöntem, piksel, üst ve alt doldurma, aşağıdakileri içeren elemanının yüksekliği verir.

Düzenleme: td-elemana Ayar yüksekliği() varsayılan dolgu (1px) içerecek şekilde ayarlanır. hesaplanmış ölçüleri

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

Bu sorunları önlemek için 0px için varsayılan dolgu ayarlamak gerekir ... aslında.

table td { 
    padding: 0; 
}

Düzenleme 2: Bir tarayıcı sorunu (bir tablonun boyutları hesaplama render motorunun metodu ile ilgili muhtemelen bir şey) olduğu anlaşılıyor. Bu davranışın etkileri, tarayıcılar arasında değişecektir. Div kullanarak alternatif, masa-olmayan bir çözüm bulmalısınız.

kaynak

2010-05-18 15:07:23

dış ve iç fonksiyonlar burada yardımcı olmaz. Güncellenmiş soruya bakın. –

= td'nin 0'ı doldurmayı denedim, ancak yardımcı olmadı. güncellenmiş soruya bakın. –

Tam olarak ne yapmaya karar verdim: div 'kullanarak başka bir çözüm bulmak için :) –

Bu konuda emin değilim .. Ayrıca oldukça garip buluyorum .. Bu benim tahminim.

sınır fiili yüksekliğe içine yiyor ve yüksekliğini

kaynak

2010-05-18 15:05:28 ZX12R

Modern kutu modeli bunu yapmıyor. Belki bir IE6 meselesidir ... ama durum buysa 190 ve 90 olmamalı mı? – Matchu

evet geçerli bir noktanız var – ZX12R

soru, neden genişlik ve yükseklik farklı davranır. Her ikisinin de sınır/dolgu/kenar boşluklarını dahil etmesini veya içermemesini beklerim. –

Bu davranışı John'dan daha iyi açıklayamıyorum, ancak bu tarayıcı tutarsızlığı hala geçerli olduğundan (en azından jQuery sürümünü yükseltemeyenler için) bu sorun için bir çözüm paylaşacağımı düşündüm. HTML DOM özelliklerini clientHeight ve clientWidth kullanma

çoğu tarayıcı içinde tutarlı görünmektedir.

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

Ayrıca offsetHeight kullanmak isteyebilirsiniz olasıdır/offsetWidth bunun yerine, gerekenler bağlı.

kaynak

2016-01-21 01:07:07 user2257275

jQuery .width() ve .height() garip davranışı

cevap

İlgili konular