Mengapa `display: inline-block` Pecah dalam IE6 dan IE7, dan Bagaimana Saya Boleh Membetulkannya?

Isu Keserasian Blok Sebaris dalam Internet Explorer 6 dan 7

Walaupun penggunaannya meluas, sifat CSS "display: inline-block" telah mengetahui isu keserasian dalam versi lama Internet Explorer. Khususnya, ia gagal berfungsi seperti yang diharapkan dalam IE6 dan IE7.

IE6/IE7 Quirks dengan Inline-Block

Dalam IE6 dan IE7, "display: inline-block " hanya berfungsi dengan betul pada elemen yang secara semula jadi sebaris, seperti rentang. Menggunakannya pada elemen peringkat blok seperti div membawa kepada tingkah laku yang tidak dijangka.

Penyelesaian untuk IE6/IE7

Untuk menyelesaikan isu ini dalam IE6 dan IE7, penyelesaian khusus ialah perlu:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Kelas pseudo "*paparan: sebaris" menggunakan hack CSS yang hanya menyasarkan IE7 dan lebih awal. Sifat "zoom: 1" memaksa IE6 dan IE7 untuk mengenali elemen sebagai mempunyai "reka letak", yang diperlukan untuk "display: inline-block" berfungsi dengan betul.

Nota Tambahan

Walaupun secara teknikalnya mungkin, anda tidak disyorkan untuk cuba mengekalkan CSS penyelesaian ini sah sambil menggunakan sifat awalan vendor. Untuk pemahaman menyeluruh tentang "display: inline-block" dan ciri keserasiannya, rujuk sumber yang dipautkan dalam jawapan yang disediakan.

Atas ialah kandungan terperinci Mengapa `display: inline-block` Pecah dalam IE6 dan IE7, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!