% 100 genişlik, ebeveynin divusundan daha büyük

vBulletin teması üzerinde çalışıyorum fakat konu listesinde, her thread genişliği için% 100, ancak iplikler ebeveynlerinden de daha büyük, ancak thread sınırını kaldırdığımda Ebeveynin div sığacak :). Bu sorunun sınırlar olduğunu düşünün.% 100 genişlik, ebeveynin divusundan daha büyük

iyi edersin jsfiddle

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

kaynak

2013-08-03 AmirHosein KazemNejad

sorun burada (iplik siyah kenarlı beyaz şekli) width metinle iç alanının bir boyutu ve kenarlıklı dolgu olduğunu olduğunu görebilirsiniz etrafında "sarılı" vardır. Bu şartname hiçbir anlam ifade etmiyor, ancak çoğu modern tarayıcı bunu takip ediyor. Kurtarıcınıza box-sizing: border-box; adı verilir. Burada

.threadbit .thread { 

    /* ... some stuff ... */ 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

Görünüş: Bu özellik here ve here üzerinde jsFiddle

Daha fazla bilgi.

kaynak

2013-08-03 09:31:00 MightyPork

Evet, haklısınız, kenarlar öğenin "genişliğini" dışarı doğru iter. Modern tarayıcıların varsayılan box-sizing'dur. o yüzden yapıyoruz ve istediğiniz desteği, size alternatif bir çözüm veya tasarım bulmak için ne gerekebilir bağlı IE8 altında desteklenmediğini

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

Not: Bu gibi bir bildiriyle çoğunda değiştirilebilir.

benim orijinal cevap ve tarayıcı desteği hafifçe değişmiş epey zaman olmuştur

DÜZENLEME. Firefox 29, Chrome 10, Safari 5.1 ve Internet Explorer 8'in tüm sürümleri box-sizing'u desteklemez, ancak belirli sürümlerden birkaç bilinen sorun vardır.

liste caniuse.com ancak burada sitesinden önemli bulduğumuz bir kaç olanlar ise geçerli yukarı güncel/tam:

IE8: min/max-genişlik/yükseklik kullanılırsa box-sizing: border-box yok sayar
IE8: box-sizingborder-box
IE9 için ayarlanmış olsa bile, min-width özelliği content-box için geçerlidir: position: absolute ve overflow: auto ya ayarlandığında kaydırma çubuğu genişliği elemanın genişliğinin çıkartılmaktadır veya IE8 ve IE9 azalma, bu konularda ve caniuse listelenen diğer pazar payı olarak overflow-y: scroll

gelecekte bir sorun daha az olacaktır.

kaynak

2013-08-03 09:31:12 Turnerj

Ctrl + C usta bir bağlantıdır, ama o bir textarea stil değil: http://css-tricks.com/box-sizing/ – MightyPork

Açıkça yoluyla P @! Sadece bir kemanın bir linkini yayınlamanın büyük bir hayranı değil, daha sonra cevabımı bir çok kez düzenliyorum. ;) Soruyu soran kişi için bir takım pratik ve öğrenim unsurları olmalı. – Turnerj

Oh evet, ama kopyalanmış snippet içinde '. Textarea'' .threadbit .thread' ile değiştirmek kesinlikle zarar vermez? – MightyPork

Her zaman firefox geliştirici aracından veya krom metrik kutusundan kutu modeline göre genişlik kontrol boyutlarıyla ilgili problemlerle karşılaştığınız zamanları unutmayın. Onun Alway iyi bir fikir

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

Ayrıca ekran özelliğini kontrol etmeyi unutmayın dahil etmek.Bir elemanın satır içi görüntülenmesi durumunda, genişlik, kenar boşluğu & doldurma değerleri alınmaz ve satır içi satır olarak görüntülenirse, genişlik, kenar boşluğu & doldurma alır. İşte

kutu boyutlandırma özelliği http://www.paulirish.com/2012/box-sizing-border-box-ftw/

kaynak

2013-08-03 09:56:57

% 100 genişlik, ebeveynin divusundan daha büyük

cevap

İlgili konular