Baru-baru ini saya sedang membangun situs web baru untuk diri saya sendiri, dan saya menemukan beberapa efek, namun mengalami beberapa masalah kecil selama implementasi, seperti blok inline ini. Untungnya, sebagian besar masalah telah terpecahkan, jadi saya menulisnya untuk dibagikan.
Saat kita membuat halaman web, terkadang kita ingin sebuah elemen dapat menentukan lebar dan tinggi seperti sebuah blok, dan juga dapat berjalan terus menerus seperti inline biasa. Misalnya tempat yang ditandai dengan garis merah pada gambar di bawah ini:
Biasanya kami menggunakan kode seperti ini untuk mencapai efek seperti ini:
Contoh Kode Sumber
[www.downcodes.com] Meskipun hal ini dapat mencapai tujuan, kode tersebut masih belum cukup sempurna dan fleksibel. Idealnya, kita dapat mencapainya hanya dengan kode berikut:
Contoh Kode Sumber
[www.downcodes.com] Dalam hal ini, kita perlu menentukan lebar tinggi dan gambar latar belakang untuk tag a. Namun, atribut tampilan default dari tag a adalah inline, dan lebar serta tinggi tidak valid. Dan jika display:block disetel ke a, meskipun masalah lebar dan tinggi dapat diselesaikan, elemen tersebut secara otomatis akan memutus garis dan tidak dapat mencapai efek yang kita perlukan. Apakah ada cara untuk mencapai hal yang sama seperti tag img, yang dapat mengatur tinggi dan lebar tanpa memutus garis secara otomatis?
Jawabannya adalah ya. Opera dan Webkit mendukung tampilan properti CSS2: inline-block. Dengan menggunakan atribut ini, kita dapat sepenuhnya mencapai efek yang kita perlukan di Opera, namun tidak akan berfungsi di browser lain.
Atribut display juga memiliki nilai yang kurang umum digunakan display: inline-table. Menggunakan nilai ini juga dapat sepenuhnya mencapai efek yang kita butuhkan. Properti ini didukung dengan benar oleh semua browser kecuali IE, tapi... yah, IE lagi. Meskipun semua Pengembang Web akan membencinya ketika dihadapkan dengan CSS, melepaskan IE sama dengan melepaskan 70% pengguna, jadi kita masih harus mencari solusi lain.
Saya tidak punya pilihan selain mencarinya di Google, dan saya benar-benar menemukannya. Seperti yang ditunjukkan dalam artikel ini, jika Anda pertama kali memicu hasLayout IE, lalu menyetel display: inline, elemen ini akan menjadi inline-block! Dengan cara ini, kita dapat memanfaatkan fitur IE yang tidak masuk akal ini dan menggabungkannya dengan beberapa CSS Peretasan, memberikan kode CSS yang kompatibel dengan berbagai browser:
Contoh Kode Sumber
[www.downcodes.com] .elemen-kelas {
tampilan: -moz-inline-stack; //Kode khusus Firefox
display: inline-block; //beberapa browser standar
perbesar: 1; //IE saja
*display: inline; //Hanya IE yang mengetahui kode ini (CSS Hack)
}
Melalui kode ini, Anda dapat mencapai blok inline yang berperilaku konsisten di berbagai browser. Namun cara ini memiliki sedikit kekurangan yaitu tidak bisa lolos verifikasi CSS W3C. Tentu saja, lolos verifikasi juga sangat mudah. Anda dapat menerbitkan style sheet dengan atribut inline-table ke browser selain IE, dan menerbitkan IE Only CSS terpisah untuk IE.
