ie10 flexBox conundrum: Ein Cross-Browser-Enigma

frustriert durch das rätselhafte Verhalten von Flexbox in ie10? Es ist nicht nur du. Trotz seiner weit verbreiteten Annahme in modernen Browsern lässt Flexbox in IE10 viel zu wünschen.

Ein klassischer Fall typisch ist ein Formularlayout -Problem:

`

display: flex;
flex-direction: row;

}

. FlexBox-Formular Eingabe [type = subjekt] {

width: 31px;

}

. FlexBox Form Input [type = text] {

width: auto;
flex: auto 1;

} `

theoretisch sollte dieses Layout einen Eingabe -Typ =" Senden "mit einer festen Breite von 31px rendern, während der Eingabe type =" Text "füllt den verbleibenden Raum nahtlos. In IE10 liegt der Eingabetyp = "Text" hartnäckig zu einer verwirrenden Breite von 263px.

Der Kern des Problems liegt in IE10 durch die teilweise Implementierung der Flexbox -Spezifikation durch IE10. Es unterstützt eine Zwischenversion der Spezifikation, die bestimmte Funktionen fehlen. Leider verhindern diese fehlenden Funktionen, dass das Layout sich wie erwartet verhält.

, um dieses Problem anzugehen, betrachten Sie die Siguientes -Ansätze:

• verwenden CSS -Präfixen: ie10 antwortet Zu bestimmten CSS -Präfixen wie -ms -flex.
• verwenden a CSS Polyfill: Polyfills wie FlexBoxie kann die Funktionalität von Flexbox in ie.
• auf frühere Layout -Methoden zurückfallen: Erwägen Sie die Übernahme traditioneller Layout -Methoden (z. B. Schwimmkörper oder Tabellen) für IE10 Kompatibilität .

Bleib auf Browser -Updates als zukünftige Versionen von IE May Führen Sie eine robustere Flexbox -Unterstützung ein. Bis dahin können diese Taktiken Ihnen helfen, durch das Cross-Browser-Enigma zu navigieren, das in IE10 Flexbox ist.