Warum funktioniert meine Flexbox im Internet Explorer 11 nicht und wie kann ich das Problem beheben?

Flexbox funktioniert im IE nicht: Ursachen und Problemumgehungen

Wie Sie festgestellt haben, kann es bei Flexbox im Internet Explorer 11 zu Fehlfunktionen kommen. Das liegt daran auf ein Parsing-Problem mit der Flex-Eigenschaft zurückzuführen. Glücklicherweise gibt es mehrere Problemumgehungen, um dieses Problem zu beheben:

1. Nutzen Sie Langschrift-Eigenschaften:

Anstatt Kurzschrift zu verwenden (z. B. „flex: 0 0 35%“), unterteilen Sie sie in Langschrift-Eigenschaften:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2. Flex-Shrink aktivieren:

Stellen Sie sicher, dass Flex-Shrink aktiviert ist, indem Sie „Flex: 0 0 35 %“ ersetzen durch:

flex: 0 1 35%;

3. Behandeln Sie Prozentwerte und einheitenlose Werte:

Verwenden Sie Variationen mit Flex-Basis, insbesondere wenn Sie sich über Ihre IE11-Version nicht sicher sind:

flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4. Betrachten Sie flex: auto:

Anstelle von „flex: 1“ verwenden Sie „flex: auto“ (entspricht „flex: 1 1 auto“). Dadurch wird verhindert, dass Elemente beim Wechsel von der Zeilen- zur Spaltenflexionsrichtung zusammenfallen.

5. Verwenden Sie Breiten-/Höheneigenschaften:

Erwägen Sie als Alternative die Rückkehr zu herkömmlichen Breiten-/Höheneigenschaften.

6. Entscheiden Sie sich für das Blocklayout:

In bestimmten Fällen kann das Blocklayout (d. h. „Anzeige: Block“) eine praktikable Alternative zum Flex-Layout sein.

Zusätzliche Tipps:

• Seien Sie vorsichtig bei Minifiern, die möglicherweise 0px in 0 umwandeln (ein Problem, das keine Auswirkungen hat). 0 %).

• Weitere Einblicke finden Sie in den folgenden Ressourcen:

  • Bildverhalten in Flexbox: https://stackoverflow.com/q/23051125
  • Kurzschrift- vs. Langschrift-Eigenschaften im IE: https://stackoverflow.com/q/24549977

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine Flexbox im Internet Explorer 11 nicht und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!