Mengapa Flexbox dalam IE10 Render dengan Lebar Tidak Dapat Diramalkan?

IE10 Flexbox Conundrum: A Cross-Browser Enigma

Kecewa dengan tingkah laku enigmatik flexbox dalam IE10? Bukan awak sahaja. Walaupun penggunaannya meluas dalam penyemak imbas moden, sokongan flexbox dalam IE10 meninggalkan banyak perkara yang diingini.

Salah satu contoh klasik ialah isu reka letak borang:

`

.flexbox form { </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: flex;
flex-direction: row;

Salin selepas log masuk

}

.input borang flexbox[type=submit] {

width: 31px;

}

.input borang flexbox[type=text ] {

width: auto;
flex: auto 1;

}`

Secara teorinya, reka letak ini harus menghasilkan input type="submit" dengan lebar tetap 31px, manakala input type= "teks" dengan lancar memenuhi ruang yang tinggal. Walau bagaimanapun, dalam IE10, input type="text" degil menjadi lalai kepada lebar yang membingungkan 263px.

Inti masalahnya terletak pada pelaksanaan separa spesifikasi flexbox IE10. Ia menyokong versi pertengahan spesifikasi, yang tidak mempunyai keupayaan tertentu. Malangnya, keupayaan yang hilang ini menghalang reka letak daripada berkelakuan seperti yang diharapkan.

Untuk menangani isu ini, pertimbangkan pendekatan berikut:

• Gunakan Awalan CSS: IE10 bertindak balas kepada awalan CSS tertentu, seperti -ms-flex.
• Gunakan Polyfill CSS: Polyfill seperti Flexboxie boleh meniru fungsi flexbox dalam IE.
• Fall Back kepada Kaedah Reka Letak Sebelumnya: Pertimbangkan untuk mengguna pakai kaedah reka letak tradisional (cth., terapung atau jadual) untuk keserasian IE10.

Nantikan kemas kini penyemak imbas, kerana versi masa hadapan IE mungkin memperkenalkan sokongan flexbox yang lebih mantap . Sehingga itu, taktik ini boleh membantu anda menavigasi enigma silang penyemak imbas iaitu flexbox dalam IE10.

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