Mengapa Flexbox Tidak Berfungsi dalam IE10?

Reka letak Flexbox tidak sah dalam IE10: Penerokaan sebab

Dalam IE10, kod berikut tidak berfungsi dengan betul:

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

Fenomena masalah: Lebar input[type=submit] hendaklah 31px dan input[type=text] hendaklah menduduki baki ruang yang tersedia dalam borang. Walau bagaimanapun, apa yang berlaku ialah lebar input[type=text] secara tidak jelas menjadi lalai kepada 263px.

Kod ini berfungsi dengan baik dalam Chrome dan Firefox.

Penjelasan:

Dalam IE, mod susun atur Flexbox belum lagi (sepenuhnya) disokong secara asli. IE10 melaksanakan versi "tween" spesifikasi, yang tidak sepenuhnya terkini, tetapi masih berfungsi.

Artikel ini mengesyorkan menggunakan petua berikut yang disediakan oleh CSS-Tricks apabila menggunakan reka letak Flexbox dalam IE:

• Gunakan awalan Vendor
• untuk menetapkan flex- yang jelas arah ( Walaupun ia adalah nilai lalai)
• Elakkan menggunakan sifat usang (seperti -webkit-box-flex)

Perlu diingat bahawa mod susun atur IE10 Flexbox adalah berdasarkan pada Mac 2012 spesifikasi draf W3C, dan draf terkini telah dikemas kini selama kira-kira setahun.

Atas ialah kandungan terperinci Mengapa Flexbox Tidak Berfungsi dalam IE10?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!