Mengapa `display: inline-block` Tidak Berfungsi dalam Internet Explorer 7 dan Bagaimana Saya Boleh Membetulkannya?

Paparan IE7: Inline-Block Ineptitude

Menemui paparan: masalah sekatan sebaris dalam Internet Explorer 7? Anda tidak bersendirian. Walaupun sifat ini berfungsi dengan sempurna dalam Firefox, IE7 nampaknya tidak menyedari kewujudannya.

Isunya:

Dengan HTML dan CSS yang disediakan:

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

Elemen "frame-header" dalam IE7 enggan berkelakuan sebagai blok sebaris, menghalang output reka letak yang diingini.

Penyelesaian:

Untuk menangani keanehan IE7 ini, gunakan paparan berikut: penggodaman sebaris:

display: inline-block;
*display: inline;
zoom: 1;

Penjelasan:

IE7 mempamerkan sokongan terhad untuk blok sebaris, mengiktiraf ia hanya dalam elemen sebaris semula jadi. Untuk elemen di luar kategori ini, seperti "frame-header" dalam contoh kami, langkah penggodaman dalam:

• *display: inline; memaksa gelagat sebaris khusus untuk IE7 dan ke bawah.
• zum: 1; mencetuskan hasLayout, sifat penting untuk blok sebaris tingkah laku.

Pertimbangan:

CSS ini tidak memenuhi piawaian pengesahan dan mungkin mengganggu gaya lain. Oleh itu, pertimbangkan untuk menggunakan helaian gaya IE7 sahaja yang dilaksanakan melalui ulasan bersyarat:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

Dengan menggabungkan helaian gaya disasarkan ini, anda boleh menangani paparan IE7: isu blok sebaris tanpa menjejaskan integriti CSS keseluruhan.

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