Flexbox が IE10 で動作しないのはなぜですか?

フレックスボックス レイアウトは IE10 では無効です: 理由の探索

IE10 では、次のコードが正しく動作しません:

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

問題現象: input[type=submit] の幅は 31px である必要があり、input[type=text] はフォーム内の残りの利用可能なスペースを占有する必要があります。ただし、input[type=text] の幅が不可解にもデフォルトで 263px になってしまいます。

コードは Chrome と Firefox で正常に動作します。

説明:

IE では、Flexbox レイアウト モードはまだ (完全には) ネイティブにサポートされていません。 IE10 は仕様の「トゥイーン」バージョンを実装していますが、完全に最新ではありませんが、依然として動作します。

この記事では、IE で Flexbox レイアウトを使用する場合、CSS-Tricks が提供する次のヒントを使用することをお勧めします。

• 明示的なフレックスボックスを設定するには、ベンダー プレフィックス
• を使用します。方向 (デフォルト値であっても)
• 廃止されたプロパティ (-webkit-box-flex など) の使用を避ける

IE10 Flexbox レイアウト モードがベースであることに注意してください2012 年 3 月に W3C ドラフト仕様が作成され、最新のドラフトは約 1 年にわたって更新されています。

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