2013-07-03 14 views
6

Esistono hack per max-width:-webkit-fit-content; per esempio 8?larghezza massima: -webkit-fit-content ie 8 equivalenti?

Cercando di ottenere un div da bambino per non occupare tutta la larghezza del genitore e questo funziona bene con ff, chrome e safari; sperando che ci sia qualche trucco per farlo funzionare anche con 8.

violino che mostra il comportamento: http://jsfiddle.net/XtZq9/ Codice per il comportamento che voglio in 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

Non c'è molto codice da seguire ... qualsiasi motivo non è possibile applicare un commento condizionale che imposta semplicemente una larghezza% su quel contenitore per ie8? – relic

+0

Voglio che la larghezza del contenitore sia dinamica in base al suo contenuto, quindi non ho voluto impostare alcun valore di larghezza statica; non c'è davvero molto codice da includere ma si aggiunge la domanda per includerlo. ecco un violino che descrive il comportamento che voglio: http://jsfiddle.net/XtZq9/ – HelloWorld

+0

@HelloWorld: '.textbox {float: left;} .textbox + * {clear: left;}' è un piccolo hack che essenzialmente fare lo stesso: http://jsfiddle.net/XtZq9/1/ - tuttavia, non posso testarlo in IE8 perché attualmente non sono su un PC Windows. – Zeta

risposta

3

Il più vicino che posso pensare è che galleggia vostri elementi. Non esattamente uguali, ma probabilmente sufficientemente simili;) Tuttavia, è necessario impostare un margine aggiuntivo, ma questo non dovrebbe costituire un problema con un foglio di stile condizionale.

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

Your modified fiddle

+0

grazie gentilmente signore – HelloWorld

+0

@ CiaoMondo Prego. – Christoph

4

Da demosthenes.info, ho imparato che posso usare semplicemente

display: table; 

invece di

width: fit-content; 

Controllare il link comunque sui problemi con spazi bianchi. Non si applica al mio caso e sostituisce semplicemente la larghezza : fit-content con display : la tabella ha risolto il mio problema abbastanza facilmente.

Problemi correlati