Mengapa IE7 Salah Mentafsir Harta CSS `inline-block` dan Bagaimana Ia Boleh Dibetulkan?

Salah Tafsiran IE7 bagi blok sebaris: Panduan Penyelesaian Masalah

Internet Explorer 7 (IE7) membentangkan cabaran unik apabila ia berkaitan dengan paparan CSS harta benda. Satu contoh sedemikian ialah ketidakupayaannya untuk mentafsirkan sifat blok sebaris dengan betul.

Kod yang dipersoalkan

Pertimbangkan kod HTML dan CSS berikut:

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

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

IE7's Salah laku

Atas sebab tertentu, IE7 gagal menggunakan penggayaan blok sebaris, menyebabkan reka letak yang diingini terjejas.

Godam IE7

Untuk mengatasi isu ini, penggodaman CSS tersuai diperlukan untuk IE7:

.frame-header {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Secara lalai, IE7 mengiktiraf blok sebaris hanya untuk elemen sebaris yang wujud. Godam ini memintas pengehadan itu.

• paparan: sebaris: Tulis ganti paparan: blok sebaris, memastikan keserasian dengan IE7.
• zum: 1: Pencetus gelagat hasLayout, penting untuk mencapai sekatan sebaris kefungsian.
• Start Property Hack: Hadkan aplikasi paparan: sebaris kepada IE7 dan penyemak imbas terdahulu.

Helaian Gaya Bersyarat

Untuk memastikan prestasi dan pengesahan yang optimum, adalah dinasihatkan untuk menggunakan lembaran gaya bersyarat untuk menyasarkan IE7 khususnya:

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

Dalam fail "ie7.css", anda boleh memasukkan penggodaman CSS tersuai untuk menangani isu pemaparan IE7. Pendekatan ini meminimumkan kerumitan kod dan mengekalkan tahap pengesahan yang lebih tinggi.

Atas ialah kandungan terperinci Mengapa IE7 Salah Mentafsir Harta CSS `inline-block` dan Bagaimana Ia Boleh Dibetulkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!