IE CSS Bug - Bir pozisyonu nasıl korurum: sayfadaki dinamik javascript içeriği değiştiğinde mutlak

Question

Bir sütun ve bir içerik div olan bir sayfam var, biraz:

<div id="container"> 
    <div id="content">blahblahblah</div> 
    <div id="column"> </div> 
</div> 

Bazı stillerde, sütun ve içerik arasında bölünmüş ancak aynı dikey konumlandırmayı sürdürmesi gereken bir görüntü var bu yüzden yukarı doğru.

Şekillendirici şuna benzer:

#column 
{ 
    width:150px; 
    height:450px; 
    left:-150px; 
    bottom:-140px; 
    background:url(../images/image.png) no-repeat; 
    position:absolute; 
    z-index:1; 
} 

#container 
{ 
    background:transparent url(../images/container.png) no-repeat scroll left bottom; 
    position:relative; 
    width:100px; 
} 

Bu, #content'daki içerik oluşturmadan önce dinamik olarak yüklendiğinde harika çalışır. Bu da her zaman firefox'ta harika çalışıyor. Ancak IE6 ve IE7'de javascript'i #content'ın içeriğini (ve dolayısıyla yüksekliğini) değiştirmek için kullanırsam, görüntüler artık sıralanmaz (#column hareket etmez). IE'yi yalnızca güncellemek için IE Developer Bar'ı kullanırsam (eğer konum ekleyin: mutlak el ile) görüntü atlar ve tekrar yukarı doğru olur.

Burada birşeylerim var mı?

@Ricky - Hmm, bu durumda, bence hiçbir çözüm yok. En iyi ihtimalle, sonradan bir jaggedy eşleşmesi olacak, ancak içeriğim genişledikçe ve daraltılırken, gizleme/gösterme pratik olarak işe yaramıyor. Yine de en iyi çözümü cevapladığınız için teşekkürler.

Answer 1

Bu, oluşturma motorunda bir hata. Her zaman ona koşarım. bunu çözmek için potansiyel bir yolu (yani sırayla yüksekliğini değiştirir) gizlemek ve içeriğini değiştirmek her div göstermektir: Umarım bu yeterince hızlı olur

var divCol = document.getElementById('column'); 
divCol.style.display = 'none'; 
divCol.style.display = 'block'; 

o :)

Answer 2

farkedilir olmadığını

DivCol gösterme ve gizleme konusunda bir titremeye dair endişe duyuyorsanız, başka bir css özelliğine sahip olabilirsiniz ve aynı etkiyi olacaktır.

var divCol = document.getElementById('column'); 
divCol.style.zoom = '1'; 
divCol.style.zoom = ''; 

Answer 3

benim için çalıştı ve hiçbir titreme etkisi ekleyip kullanarak böyle bir kukla CSS sınıf adı kaldırmak için jQuery vardı başka çözüm:

$(element).toggleClass('damn-you-ie')