Tablo satırı öğesinin konumunun 'statik' konumundan 'mutlak' olarak 'durağan' konumuna çevrilmesi neden kalıcı bir yükseklik değişikliği ile sonuçlanıyor?

Question

height: 75px ile display: table-row div çocuğun yüksekliği static, geri sonra absolute çocuk elemanının konumlandırma değişen ve By position: static

ile başlangıçta 100px olduğunu height: 100px

ile display: table div içine yerleştirilmiştir Çocuğun boyu 100px'dan 75px'a değişmektedir.

Yalnızca ana öğe bir tablo ise ve çocuk tablo satırı ve görünürde yalnızca WebKit'teyse oluşur; firefox/IE, 100 piksel yüksekliğe geri dönüyor ancak Chrome/Safari bunu yapmıyor. Örneğin ve konumlandırma türü/yüksekliğinin çıkış

<div id="div1"> 
    <div id="div2"> 
     Hello, world! 
    </div> 
</div> 

#div1 
{ 
    display: table; 
    height: 100px; 
} 

#div2 
{ 
    display: table-row; 
    height: 75px; 
} 

Here's the jsfiddle.

Orijinal olarak Chrome geliştirici araçlarında CSS özellikleriyle uğraşarak fark ettim, bu nedenle jsfiddle veya jQuery'ye özgü bir şey değil.

Neden yükseklik sürekli olarak değişir?

Answer 1

Sorunun kökü, tablo ve tablo satırı öğelerinin yükseklikleri belirttiği gerçeğinde yatar, ancak tablo yüksekliği tablo satırı yüksekliğinden daha büyüktür. Başka satır olmadığından tanımlanmamış davranışlarla sonuçlanır. spec Gönderen: height niteliği başka türlü olurdu daha uzun boylu olmak tabloyu neden olduğunda

CSS 2.1 nasıl dağıldığını ekstra alan tanımlamaz.

en azından kendi gözlemlerine dayanarak, oluyor gibi görünen şudur: Ben yanlış okuma ediyorum sürece

1. , her tarayıcı ayrıntılarını belirten spec paragraf görmezlikten geldiği görülmekte Bir tablo satır öğesinin yüksekliğini hesaplamak ve bunun yerine tablo yüksekliğini almak.

2. Tablo satırını kesinlikle yerleştirdiğinizde, hesaplanan yüksekliği belirtilen 75px olarak değişir, çünkü absolute positioning turns it into a block box ve dolayısıyla boyutları buna göre hesaplanır.

3. Öğeyi statik konumuna döndürdüğünüzde, bir tablo satırına (gerektiği şekilde) döner, ancak herhangi bir nedenle Chrome/Safari, bir blok kutusu yaptığınızda 75px tutar. Diğer tarayıcılar, yüksekliği belirtilen seviyeyi göz ardı ederek, tabloya göre yüksekliği yeniden hesaplar. Bu gibi

tarayıcılardan herhangi arabası veya yanlış davranış tartışmalıdır sahip olduğu söylenebilir olsun, teknik olarak tanımlanmamış bir davranıştır. Ancak, bir uzvun dışına çıkacağım ve bunun Chrome'un geri dönüşüm ve yeniden boyamalarda kötü bir şekilde dağılma eğilimi ile ilgili olabileceğini söylüyorsunuz, çünkü bir tarayıcının tüm özellikleri geri almasını ve düzeni geri aldığınızda düzeni yeniden düzenlemesini bekleyebilirsiniz. Tek bir özellik değişikliği - Chrome'un çok kötü bir şekilde kötü olduğu bir şey.yorumlarda belirtildiği gibi

---

da yine bu anonymous table objects bir ilgisi olabilir. Teknik özellik, boş bir tablonun anonim bir satır ve hücreye sahip olması gerektiğini söylemez, ancak Chrome, siz onu ilk konumlandırdığınızda tablo satırını değiştirmek için bir tane oluşturuyor gibi görünebilir, ancak tekrar yerleştirdikten sonra onu kaldırmayı unutur. Eğer tarayıcı sonra spesifikasyonları uyarınca anonim satır kutusuna kaydırılır tablonuzun bir çocuk gibi bazı çıplak metin eklerseniz

Örneğin

,:. Tahminen

<div id="div1"> 
    Anonymous row 
    <div id="div2"> 
     <p>Hello World!</p> 
    </div> 
</div> 

Every browser will consistently report the height of #div2 as 75px. kalan boşluktur anonim satır kutusu tarafından ele alındı, ama maalesef daha fazla yorum yapmak için CSS tablo modeliyle yeterince tanıdık değilim.