Mengapakah Flexbox berkelakuan di luar jangkaan dalam IE10?

Isu Keserasian Flexbox dalam IE10

Apabila bekerja dengan Flexbox dalam IE10, anda mungkin menghadapi tingkah laku yang tidak dijangka. Walaupun sintaks Flexbox disokong, ia beroperasi di bawah spesifikasi "tween", yang berbeza daripada pelaksanaan yang lebih baharu.

Dalam kod anda, isu timbul apabila menentukan sifat flex untuk input[type=text]. IE10 memerlukan sintaks yang sedikit berbeza, di mana anda harus menggunakan -ms-flex dan bukannya flex untuk keserasian merentas pelayar. Selain itu, pastikan semua awalan vendor yang diperlukan disertakan untuk menyokong penyemak imbas lama.

Berikut ialah CSS dikemas kini yang sepatutnya menyelesaikan isu ini:

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

Atas ialah kandungan terperinci Mengapakah Flexbox berkelakuan di luar jangkaan dalam IE10?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!