Bu bir Firefox şamandıra hatası mı?

Question

Tasarımcı, ilk sütunun altındaki tam genişlikte bir alıntı ile sağdaki metinleri, sol sütundaki resimlerle birlikte iki sütun içerik alanı düzeni istedi.

İstemci, içeriği bu CMS tabanlı sitede girecek, böylece sütunların gerektiğinde dikey olarak genişletilmesi gerekiyor. Gerçek sitede arka plan renkleri yoktur, bu nedenle sütunların eşit yüksekliğe sahip olması gerekmez.

http://jsfiddle.net/juo0ubjw/

<div class="container"> 
    <div class="top-left">Picture here</div> 
    <div class="full-width"> 
     <blockquote>Blockquote here</blockquote> 
    </div> 
    <div class="bottom-left">Picture here</div> 
    <div class="top-right"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
    </div> 
</div> 

.container { 
    width: 300px 
} 
.top-left { 
    background:red; 
    width:100px; 
    height:100px; 
    float:left; 
} 
.top-right { 
    background:blue; 
    margin-left:100px; 
    width:200px; 
} 
.full-width { 
    background:purple; 
    float:left; 
    width:100%; 
    height:80px; 
} 
.bottom-left { 
    background:green; 
    float:left; 
    width:100px; 
    height:100px; 
} 
p { 
    padding:10px; 
} 

O Safari, Chrome ve IE inşaat büyük

. Ama Firefox'ta, sağdaki div dışında asılı bir kelime ile garip bir sorun var.

Benim düzeltme: Burada sonsuz genişlikte ve boşluk ile ilgili bir FF şamandıra böcek üzerinde söz gördük, ama hepsi benim genişlikleri tanımlandığı gibi burada durum olarak görünmüyor http://jsfiddle.net/rfoc71pe/

ve kelimeler sarılıyor.

Soru: Bunun neden olduğunu ve gerçekten bir hata mı yoksa CSS'imle ilgili bir sorun mu olduğunu bilen var mı? Ayrıca, daha az hacky hissi veren, düzeltmenin bir yolu olup olmadığını merak ediyorum. Teşekkürler!

Answer 1

Gerçekten bir çeşit böcek olduğunu düşünüyorum. Ama, senin için bir düzeltme buldum. İşte burada: JSFiddle.

HTML

<div class="container"> 
<div class="top-left">Picture here</div> 
<div class="full-width"> 
    <blockquote>Blockquote here</blockquote> 
</div> 
<div class="bottom-left">Picture here</div> 
<div class="top-right"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
</div> 

CSS

.container { 
    width: 300px 
} 

.top-left { 
    background:red; 
    width:100px; 
    height:100px; 
    float:left; 
} 

.top-right { 
    background:blue; 
    margin-left:100px; 
    width:200px; 
} 

.full-width { 
    background:purple; 
    float:left; 
    width:100%; 
    height:80px; 
    padding: 10px 0 10px 0; 
} 

.bottom-left { 
    background:green; 
    float:left; 
    width:100px; 
    height:100px; 
} 

p { 
    padding: 10px 10px 0 10px; 
} 

üzgün varsa, bir renk gerekmez ve mor blok beyaz olacaktır. Benim çözümümde, bu bloğun sınırlarını göremezsiniz.

Mozilla'nın foruma yazmayı deneyin ve sorununuzu açıklayın.