Warum verhält sich Flexbox in IE10 unerwartet?

Flexbox-Kompatibilitätsprobleme in IE10

Beim Arbeiten mit Flexbox in IE10 kann es zu unerwartetem Verhalten kommen. Obwohl die Flexbox-Syntax unterstützt wird, arbeitet sie mit der „Tween“-Spezifikation, die sich von neueren Implementierungen unterscheidet.

In Ihrem Code tritt das Problem auf, wenn Sie die Flex-Eigenschaft für input[type=text] angeben. IE10 erfordert eine etwas andere Syntax, wobei Sie aus Gründen der browserübergreifenden Kompatibilität -ms-flex anstelle von flex verwenden sollten. Stellen Sie außerdem sicher, dass alle erforderlichen Herstellerpräfixe enthalten sind, um ältere Browser zu unterstützen.

Hier ist das aktualisierte CSS, das das Problem beheben sollte:

.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;
    -ms-flex: auto 1;
}

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