2013-07-03 10 views
6

Gibt es Hacks für max-width:-webkit-fit-content; für zB 8?max-width: -webkit-fit-content also 8 gleichwertig?

Der Versuch, ein Kind div zu bekommen, um die ganze Breite des Elternteils nicht aufzunehmen, und das funktioniert gut mit ff, Chrom und Safari; in der Hoffnung, dass es einen Hack gibt, um es mit ie 8 zu arbeiten.

Fiddle zeigt das Verhalten: http://jsfiddle.net/XtZq9/ -Code für das Verhalten, das ich in IE8 will:

#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

Nicht viel Code, um weiterzugehen ... irgendeinen Grund, den Sie einen bedingten Kommentar nicht anwenden können, der einfach eine% Breite auf diesem Behälter für ie8 setzt? – relic

+0

Ich möchte, dass die Breite des Containers entsprechend seinem Inhalt dynamisch ist, also wollte ich keinen Wert für die statische Breite festlegen. Es gibt wirklich nicht viel Code zum Einbinden, aber ich füge die Frage an, um sie einzuschließen. Hier ist eine Geige, die das Verhalten beschreibt, das ich will: http://jsfiddle.net/XtZq9/ – HelloWorld

+0

@HelloWorld: '.textbox {float: links;} .textbox + * {clear: left;}' ist ein kleiner Hack, der im Wesentlichen mach dasselbe: http://jsfiddle.net/XtZq9/1/ - aber ich kann das nicht im IE8 testen, da ich momentan nicht auf einem Windows PC bin. – Zeta

Antwort

3

Die nächstgelegene ich Ihre Elemente schwimmen denken kann. Nicht genau gleich, aber wahrscheinlich ausreichend ähnlich;) Sie müssen allerdings einen zusätzlichen Rand festlegen, aber das sollte kein Problem mit einem bedingten Stylesheet sein.

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

Your modified fiddle

+0

danke herzlichen sir – HelloWorld

+0

@HelloWorld Gern geschehen. – Christoph

4

Von demosthenes.info beobachtete, lernte ich, dass ich einfach

können über Probleme mit Whitespaces
display: table; 

statt

width: fit-content; 

jedoch die Verbindung überprüfen. Es gilt nicht für meinen Fall, und einfach ersetzen Breite: fit-Inhalt mit Anzeige: Tabelle löste mein Problem ganz einfach.