CSS: Sağa kayan div, IE kapsayıcısında ekranın tam genişliğini genişletmesine neden olur

Question

Benzer bir soru gördüm here, ve bir yanıt görmedim. Bir öğenin doğru bir şekilde, bir üst div içinde yer almasıyla ilgili bir sorun yaşıyorum ve bu da div'in IE7'de sayfanın tüm genişliğini genişletmesine neden oluyor. Bu, diğer tarayıcılarda (Firefox ve Chrome) gerçekleşmez. Ayrıca referans için sorudan sonra resim gönderdim. Kullanmakta olduğum HTML aşağıdaki gibidir:

<div id="journal" class="journalIE"> 
    <div class="title_bar"> 
     <div> 
      Testing 
     </div> 
     <div class="actions"></div> 
     <div class="clear"></div> 
    </div> 
</div> 

Bu etiketleri kullanıyorum CSS de aşağıdadır. Yukarıda bahsi geçen diğer kişinin sorusuyla tutarlı bir şekilde fark ettiğim bir konu ve benim sorunum, her iki ebeveyn divunun da konumlandırılmasıdır (yukarıdaki kişi mutlaktır, ben sabitledim).

#journal 
{ 
    z-index: 1; 
} 

.journalIE 
{ 
    right: 1px; 
    bottom: 18px; 
    position: fixed; 
} 

#journal .title_bar 
{ 
    background: #F3F3F3; 
    border: 1px solid #C5D6E8; 
    color: #363638; 
    font-size: 11pt; 
    font-weight: bold; 
    height: 20px; 
    padding: 4px; 
    margin-bottom: 4px; 
} 

#journal .title_bar .actions 
{ 
    float: right; 
} 

.clear 
{ 
    clear: both; 
} 

'Eylemler' sınıfının doğru kalacağına dikkat edin. Bu şamandırayı çıkarırsam, kutum this'a benziyor. Ancak, kayan nokta eklendiğinde, tüm ekranı uzatır ve this gibi görünür. Bu bilinen bir IE hatası mı? Çünkü başka bir tarayıcıda olmuyor ve beni delirtiyor.

Merak edenler için 'actions' div'unda içeriklerim vardı, ancak her şeyi kök sorununa indirdiler.

Her türlü yardım çok takdir edilecektir. Çok teşekkürler.

Answer 1

mı bu

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
     Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div> 

ve daha sonra bir Css sınıfı eklemek

.Test { şamandıra: right; }

yapmalı, çalışmıyorsa bize bildirin. * Bir kutu bir (width niteliği ile atanmıştır ya da bir yerleştirilen eleman olarak bir yerleşik genişliği) açık genişliğe sahip olmalıdır süzülüyor:

MNK

Answer 2

Bir genişlik gerekir. *

aracılığıyla: W3C

Answer 3

Ben size "eylemler" div ile ne yapmak istediğini açıklamadı olarak ne istediğinizi tam olarak emin değilim, ama sen "eylemler" div isteseydi "Test" div'in hemen yanında yüzerim, ayrı bir .floatr sınıfı yapmayı denedim ya da stili doğrudan div'a uyguladığınızda da çalışır. .floatr sınıfı ile

.floatr { 
float: right; 
} 

, "eylemler" maddesine uygulamak div:

<div class="actions floatr"></div> 

Nedenini bilmiyorum, ama "eylemler" div ayarı şamandıra görmezden geliyor bana Bu şekilde ayarladığınız sınıf. Kişisel olarak, birden fazla dersi divlere uygulamayı tercih ediyorum. Bu, bu sınıfı benim istediğim diğer div'ler üzerinden yeniden kullanmamı sağlıyor, ancak bazı tarayıcıların ilkinden sonra bildirilen herhangi bir sınıfı görmezden geleceğini duydum. Ah, ben henüz büyük tarayıcılarla bu problemle karşılaşmadım ...

Bekleyin.

Kodu tekrar gözden geçirdim ve sanırım sınıflarınızı nasıl ayarlayacağınızla ilgili bir sorun yaşadınız. Sizin "eylemler" div eylem üzerinde eksikti, CSS için virgül eklemeyi deneyin: Bazen tahmin

#journal .title_bar, .actions 
{ 
    float: right; 
} 

Eğer beklediğiniz o şekilde davranır emin olmak için doğrudan etkisi uygulamak gereken bir şey anlamaya ve daha sonra muhtemelen işe yaramazsa bazı sorta sözdizimi hatası olduğunu anlamaya çalışın. heh.