IE10 で Flexbox が予期せぬ動作をするのはなぜですか?

IE10 での Flexbox の互換性の問題

IE10 で Flexbox を使用すると、予期しない動作が発生する可能性があります。 Flexbox 構文はサポートされていますが、新しい実装とは異なる「トゥイーン」仕様に基づいて動作します。

コードでは、input[type=text] の flex プロパティを指定するときに問題が発生します。 IE10 では若干異なる構文が必要です。ブラウザ間の互換性を確保するには、flex の代わりに -ms-flex を使用する必要があります。さらに、古いブラウザをサポートするために必要なベンダー プレフィックスがすべて含まれていることを確認してください。

問題を解決する更新された CSS は次のとおりです:

.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;
}

以上がIE10 で Flexbox が予期せぬ動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。