Warum funktioniert Flexbox nicht in IE10?

Flexbox-Layout ist in IE10 ungültig: Ursachenerkundung

In IE10 funktioniert der folgende Code nicht richtig:

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex: auto 1;
    -moz-flex: auto 1;
    -ms-flex: auto 1;
    -o-flex: auto 1;
    flex: auto 1;
}

Problemphänomen: Die Breite von input[type=submit] sollte 31 Pixel betragen und input[type=text] sollte den verbleibenden verfügbaren Platz im Formular belegen. Was jedoch passiert, ist, dass die Breite von input[type=text] aus unerklärlichen Gründen standardmäßig 263 Pixel beträgt.

Der Code läuft einwandfrei in Chrome und Firefox.

Erklärung:

Im IE wird der Flexbox-Layoutmodus noch nicht (vollständig) nativ unterstützt. IE10 implementiert eine „Tween“-Version der Spezifikation, die zwar nicht ganz aktuell ist, aber dennoch funktioniert.

In diesem Artikel wird empfohlen, die folgenden von CSS-Tricks bereitgestellten Tipps zu verwenden, wenn Sie das Flexbox-Layout im IE verwenden:

• Verwenden Sie das Vendor-Präfix
• , um ein explizites Flexbox-Layout festzulegen. Richtung (Auch wenn es sich um den Standardwert handelt)
• Vermeiden Sie die Verwendung veralteter Eigenschaften (z. B. -webkit-box-flex)

Es ist zu beachten, dass der IE10-Flexbox-Layoutmodus basiert im März 2012 W3C-Entwurf der Spezifikation, und der neueste Entwurf wurde seit etwa einem Jahr aktualisiert.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Flexbox nicht in IE10?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!