2013-07-03 10 views
6

Czy są jakieś hacki dla max-width:-webkit-fit-content; dla np. 8?max-width: -webkit-fit-content czyli 8 odpowiednik?

Próba uzyskania elementu div dziecka, który nie zajmuje całej szerokości elementu nadrzędnego i działa dobrze z funkcjami ff, chrome i safari; mając nadzieję, że jest jakiś hack, który sprawi, że zadziała, np. 8 razy.

Fiddle pokazujący zachowanie: http://jsfiddle.net/XtZq9/ Kodeks zachowania chcę w IE8:

#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

Nie ma zbyt wiele kodu, aby przejść dalej ... z jakiegokolwiek powodu nie można zastosować warunkowego komentarza, który po prostu ustawia% szerokości na tym pojemniku dla ie8? – relic

+0

Chcę, aby szerokość kontenera była dynamiczna zgodnie z jego zawartością, więc nie chciał ustawić żadnej wartości szerokości statycznej; naprawdę nie ma zbyt wiele kodu, ale chory dołącza to pytanie, aby je uwzględnić. Oto skrzypce opisujące zachowanie, które chcę: http://jsfiddle.net/XtZq9/ – HelloWorld

+0

@HelloWorld: '.textbox {float: left;} .textbox + * {clear: left;}' to mały hack, który zasadniczo zrób to samo: http://jsfiddle.net/XtZq9/1/ - jednak nie mogę tego przetestować w IE8, ponieważ nie jestem obecnie na komputerze z Windows. – Zeta

Odpowiedz

3

Najbliżej mogę myśleć unosi swoje elementy. Nie do końca podobne, ale prawdopodobnie wystarczająco podobne;) Musisz jednak ustawić dodatkowy margines, ale nie powinno to stanowić problemu z warunkowym arkuszem stylów.

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

Your modified fiddle

+0

dziękuję uprzejmie proszę pana – HelloWorld

+0

@HelloWorld Nie ma za co. – Christoph

4

Od demosthenes.info, dowiedziałem się mogę po prostu użyć

display: table; 

zamiast

width: fit-content; 

Sprawdź odnośnik jednak o problemach z białych znaków. Nie dotyczy to mojego przypadku i po prostu zastępuję width: fit-content z display: table dość łatwo rozwiązałem mój problem.

Powiązane problemy