Setahun yang lalu, tidak ada artikel tentang atribut blok inline di internet. Untuk memfasilitasi semua orang untuk lebih memahami atribut, saya merangkum dan menyusun artikel "Kedalaman: Pemahaman mendalam tentang tampilan: blok inline".
Sekarang ada peningkatan permintaan untuk penerapan atribut blok inline. Sayangnya, hanya firefox3 beta, IE8 beta, opera, dan safari mendukung atribut blok inline (catatan: hanya opera dan safari yang mendukung mereka), tetapi IE6 dan IE7 dapat mensimulasikan dengan memicu haslayout. Firefox2 memiliki -moz-inline-box dan -moz-inline-stack atribut pribadi (perbandingan dua atribut ini dikutip dari Qin Ge's "Dua contoh aplikasi tampilan: inline-block").
Dalam aplikasi aktual -Moz-inline-box akan memiliki masalah seperti penyelarasan antar elemen. Meskipun Firefox juga memiliki properti pribadi -Moz-box-align untuk membantu menyelesaikan masalah penyelarasan, masih sulit untuk memprediksi banyak masalah. Secara relatif, -Moz-inline-Stack melakukan lebih seperti blok inline, yang dapat diuji di Firefox3. Namun, juga akan ada bug saat menggunakan -moz-inline-stack. Jika elemen luar layar: -Moz-inline-stack; ditampilkan: inline; yang akan membuat tautan yang terkandung dalam Firefox tidak dapat diklickable, dan ini perlu diselesaikan dengan posisi: relatif;.
Kode akhir yang kami simulasikan adalah sebagai berikut:
Tampilan: blok inline; /*Firefox3 beta, IE8 beta, opera, dukungan safari, haslayout memicu elemen inline di bawah IE*/
Tampilan: -Moz-Inline-Stack; / * Atribut pribadi Firefox, Anda juga dapat menggunakan -moz-inline-box */
Zoom: 1; /*Yaitu pemicu haslayout*/
*Tampilan: inline; /*Setelah haslayout dipicu di bawah IE, mengatur elemen blok ke inline akan membuat tampilan: efek inline mirip dengan tampilan: blok inline*/
Text-Indent: -9999px;
*Text-Indent: 0;
Ukuran font: 0;
Line-Height: 0; /* Jika Anda ingin menyembunyikan teks, keempat atribut ini dapat digunakan*/
/*Selain itu, teks yang tersembunyi di atas dapat disembunyikan, dan metode yang lebih disederhanakan dapat digunakan: garis-garis: nilai super besar; Ukuran font: 0; */
meluap: tersembunyi; /* Sembunyikan konten overflow*/
Vertikal-Align: tengah; /* Pusat vertikal di dalam garis, untuk penyimpangan opera yang lebih besar*/
lebar:? PX; /*? adalah nilai non-auto*/
tinggi:? PX; /*? adalah nilai non-auto*/