Ich versuche, altes Layout basierend auf Tabellen und JS in die neue Flexbox mit Abwärtskompatibilität zu konvertieren, indem ich die Tabellen für alte Browser behalte (speziell IE8, IE9 und Opera 10+).
Das Problem ist, dass es keine display:flex-item gibt, um den alten Stil von display:table-cell zu überschreiben.
Ich habe verschiedene Definitionen wie display:inherit , display:initial ausprobiert, aber keiner kann die Anzeigedefinition zurücksetzen, um korrekt als flex-item zu funktionieren.
Was immer ich in der Anzeige für .details eingestellt habe, funktioniert nicht als Flex-Item und wächst nicht , um den verbleibenden Platz zu füllen.
Irgendeine Idee, wie Sie dies überschreiben können, ohne JS zu verwenden, um die Browserversion zu erkennen und die Stile zu wechseln?
Ich habe versucht, nach Lösungen zu suchen, aber die meisten Ergebnisse sind nur allgemeine Artikel über Flexbox; nur ähnlich ist dieser Test , der die Rückwärtskompatibilität einfach nicht löst.
UPDATE 1: Dies ist eine JSFiddle-Demo einer reinen Flexbox und Flexbox kombiniert mit einem Tabellenlayout. Wenn Sie die Größe des Ergebnisfensters ändern, verkleinert sich das reine Layout anders als das untere, das Tabelle und Flexbox kombiniert. Hinweis: In Chrome funktioniert das korrekt, probieren Sie es in Firefox, IE, Safari, etc.
UPDATE 2: Safari funktioniert korrekt mit vorgegebenen Definitionen ... aktualisierte JSFiddle-Demo
Wie Danield erwähnt hat, werden alle Kinder eines Flex-Containers (bezeichnet mit display: flex oder display: inline-flex ) automatisch zu Flex-Objekten. Es gibt keine display -Eigenschaft für ein Flex-Element. Stattdessen legen Sie einen anderen Wert fest, abhängig davon, wie die untergeordneten Elemente des Flex-Elements angelegt werden sollen. Wenn Browser display: flex-item erkennen, dann haben sie wahrscheinlich eine seltsame Nicht-Standard-Implementierung von "flexbox", weil dieser Wert in keiner Inkarnation der Flexbox-Spezifikation existiert hat (und ich habe keine Ahnung, was genau damit korrespondieren würde, wenn sie es wäre) tat).
Der Anfangswert von display ist inline , also entspricht display: initial display: inline . Siehe diese Antwort . Sie versuchen, die Elemente auf die Standardwerte von display zurückzusetzen, wie sie von Browsern angegeben werden. Sie müssen diesen Wert im Voraus kennen; Für div elements ist es display: block .
Leider überschreibt dies die vorhandene Deklaration table-cell in allen Browsern aus offensichtlichen Gründen. In diesem Fall können Sie genauso gut am Tabellenlayout festhalten, wenn es bereits für Sie funktioniert, wenn Sie Browser unterstützen müssen, die flexbox nicht unterstützen.
Es gibt kein display:flex-item , denn wenn Sie display:flex für ein Containerelement festgelegt haben, werden die untergeordneten Objekte automatisch Objekte umgebogen.
Hier ist eine Demo , um zu zeigen, dass die display:table-cell auf die Kinder keinen Einfluss hat Funktionalität der Flex-Eigenschaften auf den Kindern
Bearbeiten: Wenn Sie für Firefox und IE die Regel display:flex nach der display:table-cell -Regel hinzufügen, wirkt sich die display:table-cell auf die untergeordneten Elemente nicht auf die Funktionalität der flex-Eigenschaften der untergeordneten Elemente aus
Fügen Sie die Flex-Shrink-Eigenschaft hinzu, um zu verhindern, dass mehr als ihr Inhalt verkleinert wird
Tags und Links css css3 flexbox tablelayout