2013-07-03 11 views
6

max-width:-webkit-fit-content; için 8, yani herhangi bir hack var mı?max-width: -webkit-fit-content yani 8 eşdeğeri?

Ebeveynin genişliğini almamak için bir çocuk div almaya çalışıyorum ve bu ff, krom ve safari ile iyi çalışır; umuyoruz ki 8 tane ile çalışmak için bir hack var. davranışı gösteren

Fiddle: Ben ie8 istediğiniz davranış için http://jsfiddle.net/XtZq9/ Kodu:

#wrap { 
    background-color: aqua; 
    width:300px; 
    height: 50px; 
    padding-top: 1px; 
} 

.textbox { 
    background-color: yellow; 
    max-width: intrinsic; 
    max-width:-webkit-fit-content; 
    max-width: -moz-max-content; 
    margin-top: 2px; 
} 

<div id="wrap"> 
    <div class="textbox"> 
     Here is some text 
    </div> 
    <div class="textbox"> 
     Here is other, longer, text 
    </div> 
</div> 
+0

Devam etmek için çok fazla kod yok ... herhangi bir nedenle, ie8 için bu kapsayıcıda% genişlik ayarlayan bir koşullu yorum uygulayamazsınız? – relic

+0

Kabın genişliğinin içeriğine göre dinamik olmasını istiyorum, bu nedenle herhangi bir statik genişlik değeri ayarlamak istemedim; Gerçekten içermek için çok fazla kod yok, ama hastayı eklemek için hastaya ekleyelim. Burada istediğim davranışı açıklayan bir keman var: http://jsfiddle.net/XtZq9/ – HelloWorld

+0

@HelloWorld: '.textbox {float: left;} .textbox + * {clear: left;}' esas olarak küçük bir hack Aynı şeyi yapın: http://jsfiddle.net/XtZq9/1/ - ancak, şu anda IE8'de test edemiyorum şu anda bir Windows PC'de değilim. – Zeta

cevap

3

Ben senin elemanları yüzüyor düşünebiliriz yakın. Tam olarak benzer değil, ama muhtemelen yeterince benzer;) Ancak, ekstra marj ayarlamanız gerekir, ancak bu koşullu bir stil sayfası ile sorun olmamalıdır.

.textbox { 
    background-color: yellow; 
    float:left; 
    clear:left; 
} 

Your modified fiddle

+0

Teşekkür ederim nazikçe – HelloWorld

+0

@HelloWorld Hoş Geldiniz. – Christoph

4

izlemeye devam, ben sadece beyaz alanlara ilişkin sorunlar hakkında ancak linki kontrol edin yerine

width: fit-content; 

ait

display: table; 

kullanabilirsiniz öğrendik. Bu benim durumum için geçerli değildir ve genişlik: fit-content'u ekranı ile değiştirmez: tablo problemimi oldukça kolay bir şekilde çözdüm.