Wie kann ich den „Sticky Footer' von Flexbox erfolgreich in Internet Explorer 11 implementieren?

Flexbox in Internet Explorer 11: Mögliche Hindernisse erkunden

Das Navigieren im Bereich der CSS-Flexbox kann eine entmutigende Aufgabe sein, insbesondere wenn man die Vielfalt bedenkt Ebenen der Browserkompatibilität. Während die meisten modernen Browser Flexbox nahtlos unterstützen, stellt Internet Explorer 11 eine besondere Herausforderung dar. Ein Problem entsteht, wenn versucht wird, das „Sticky Footer“-Beispiel aus „Solved by Flexbox“ zu implementieren, ohne unerwartetes Verhalten hervorzurufen.

Um in die Lösung einzutauchen, ist es wichtig, die Auswirkungen von display:flex auf die < html> und Breite: 100 % am Elemente. Laut CanIUse interpretieren IE10 und IE11 flex:1 aufgrund einer historischen Abweichung von der Entwurfsspezifikation anders als andere Browser. Standardmäßig weisen sie Flex-Elementen 0 0 auto statt 0 1 auto zu.

Um dieses Problem zu beheben, passen Sie den Flex-Parameter in Ihrem CSS auf 1 0 0 an. Diese Änderung sollte das Problem zumindest teilweise lindern. Allerdings kann diese Änderung die Funktionalität von Firefox unbeabsichtigt beeinträchtigen. Um dies zu mildern, setzen Sie Targeting-Hacks speziell für Mozilla ein, um Flex wieder auf den beabsichtigten Wert zurückzusetzen.

Zum Beispiel:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Denken Sie daran, dass Flexbox weiterhin eine W3C-Kandidatenempfehlung bleibt, was zu Ungleichheiten beiträgt in Browserinterpretationen. Mit der Fertigstellung der Spezifikation wird erwartet, dass diese Inkonsistenzen weniger werden.

Das obige ist der detaillierte Inhalt vonWie kann ich den „Sticky Footer' von Flexbox erfolgreich in Internet Explorer 11 implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!