Bagaimanakah Saya Boleh Jadikan `display: inline-block` Berfungsi dengan Betul dalam Internet Explorer 6 dan 7?

Dilema blok sebaris dalam Internet Explorer 6 dan 7

Walaupun diterima secara meluas, blok sebaris tidak berfungsi dengan baik dengan Internet Explorer 6 dan 7. Kebiasaan ini boleh menghalang usaha anda untuk menggunakan sekatan sebaris dengan berkesan untuk reka letak halaman.

Sebabnya kerana tingkah laku ini terletak pada fakta bahawa, dalam IE6/IE7, blok sebaris hanya berfungsi dengan betul pada elemen sebaris yang wujud, seperti rentang. Untuk meluaskan jangkauannya kepada elemen seperti div, penyelesaian diperlukan.

Mengatasi Cabaran

Untuk membuat inline-block berfungsi dengan div dan elemen peringkat blok lain dalam IE6/IE7, gunakan coretan CSS berikut:

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

Memecahkan Penyelesaian

1. paparan: blok sebaris: Mengisytiharkan tingkah laku blok sebaris.
2. *paparan: sebaris: A " selamat" penggodaman CSS yang menyasarkan IE7 dan ke bawah, memaksa sebaris tingkah laku.
3. zum: 1: Menyediakan "susun atur" untuk elemen peringkat blok, yang penting untuk blok sebaris berfungsi dalam IE6/IE7.

Maklumat Tambahan

Walaupun mungkin untuk mencapai CSS yang sah semasa menggunakan ini penyelesaian, ia tidak praktikal, terutamanya jika sifat awalan vendor digunakan di tempat lain.

Untuk pemahaman yang lebih komprehensif tentang paparan: blok sebaris, rujuk sumber yang berkaitan, tidak termasuk tindanan -moz-sebaris, yang hanya terpakai kepada Firefox 2.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Jadikan `display: inline-block` Berfungsi dengan Betul dalam Internet Explorer 6 dan 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!