Firefox: kutu modelinin yanlış yorumu?

Question

Sadece Firefox'un tuhaf davranışını keşfettim.

100px yükseklikteki bir tablo hücrem varsa ve buna 20px dolgu eklediyse - toplam yükseklik 140px olmalıdır.

http://jsfiddle.net/8wDde/

Herkes bir düzeltme bilerek:

Tüm tarayıcılar doğru hareket

, Firefox 8.0 dolgu yok sayar?

Answer 1

tr {height: 140px;} 

bakınız: http://jsfiddle.net/8wDde/19/

hücrenin boyu ve padding

Answer 2

Bu garip davranır. display:block; eklemek sorunu çözebilir. FF8.01 See test:

http://jsfiddle.net/8wDde/1/

Ama aynı zamanda neden bilmiyorum?

https://developer.mozilla.org/en-US/search?q=table+padding içinde arama yaptım, ancak bir şey bulamadım. Orada da arama yapmayı deneyebilirsiniz.

GÜNCELLEME: http://jsfiddle.net/8wDde/7/

td değişim hattını önlemek için overflow:hidden ekleyin.

Answer 3

Bu konuyla ilgili hiçbir bilgiyi Google'da bulamadım, bu yüzden Firefox'u düzeltmenin bir yolu bir CSS kesmek olacaktır. yüksekliği 200px olsaydı

@-moz-document url-prefix() { 
td{ 
    height:140px !important; 
} 
} 

Açıkçası, o zaman üstte ve altta eksik 20px hesaba 240px için değiştirmek istiyorum.

Bu, tüm Firefox sürümlerini hedefler, bir FF8 özel css hack olup olmadığından emin değilim.

Burada bu tanıtımını görebilirsiniz

: http://jsfiddle.net/charlescarver/8wDde/2/

Edit: Ben Giberno yanıtını gibi daha En iyi çapraz tarayıcı çözüm eşit tablo satırının tam yüksekliğini ayarlamak için olabilir gibi görünüyor

Answer 4

Buben another question yazılan yorumlar bir çift umarım biraz daha net bir dolgun açıklamasıdır. Opera'nın Firefox ile aynı davranışa sahip olduğunu unutmayın.

Yukarıdaki şemada, toplam hücre alanı, karanlık kutudur ve My Text metni, td içeriğidir ve bu, Hücre Kutusu'nu (C) tanımlamasıdır.

Şimdi, CSS 2.1 spektrumu söyler:

bir table-row elemanın kutu yüksekliği kullanım madde mevcut satır tüm hücreleri bulunur kez hesaplanır: bu satırın hesaplanan height 'en fazla olduğu, satırındaki her hücrenin hesaplanan 'yüksekliği' ve hücreler tarafından gereken minimum yükseklik (MIN). Bir 'table-row' için 'auto' değeri ' ' değeri, düzeninin MIN için kullanıldığı satır yüksekliği anlamına gelir. MIN, hücre kutusu yüksekliklerine ve hücre kutusu hizalamasına bağlıdır (bir satır kutusu yüksekliğinin hesaplanması gibi çok ). ...

CSS 2.1'de, bir hücre kutusunun yüksekliği, içerik için tarafından istenen minimum yüksekliktir. Tablo hücresinin 'yükseklik' özelliği, satırın yüksekliğini etkileyebilir (yukarıya bakın), ancak hücre kutusunu yüksekliğini artırmaz.

Yani td { height:100px; } Satır Yüksekliği (R) (en az 100px yüksek olacaktır) ama Hücre Kutusu (C) etkilemez etkiler.

Diğer yandan, td { padding:20px; }, Hücre Kutusu'na (C) uygulanır, bu nedenle (C) + Üst Dolgu + Alt Dolgu yüksekliği 100 pikselden azsa, satır yüksekliği etkilenmez ve hala 100 pikseldir.

(C) + Üst Dolgu + Alt Dolgu 100px'den daha büyükse, satır yüksekliği (C) + Üst Dolgu + Alt Dolgusunun tüm yüksekliğini alabilmek için genişler.

Ardından, td { background-color:blue } tüm satır yüksekliği (R) ve hücre genişliği için geçerlidir.

Finalde kafa karıştırıcı faktör Firebug td hesaplanan yükseklik değeridir http://jsfiddle.net/Ez7xz/

de eylem görebilirsiniz. Buradaki gibi görünen şey, yüksekliğin content-box kutu boyutlandırmasının sonucu olduğunu ve R'nin alt ve üst dolgusu oranından daha düşük olduğunu bildirmesidir. Bu garip görünüyor olsa da, makul bir şekilde raporlayabileceği başka bir şey değil.