Proyek terbaru melibatkan banyak produksi formulir, terutama kotak centang dan kotak radio. Namun, selama proses pengembangan front-end, ditemukan bahwa kotak centang tunggal (kompleks) dan teks cepat di belakangnya tidak dapat diselaraskan tanpa pengaturan apa pun, dan ada perbedaan besar antara Firefox dan IE. Bahkan jika vertikal-Align: tengah diatur, itu masih tidak dapat diselaraskan dengan sempurna. Seperti yang ditunjukkan pada gambar di bawah ini:
Jadi saya memeriksa beberapa situs web secara online dan menemukan bahwa masalah ini adalah umum, seperti yang ditunjukkan pada gambar di bawah ini (FF3.5):
Di banyak situs web, ada masalah bahwa elemen formulir tidak dapat diselaraskan dengan teks yang cepat. Jadi saya berencana untuk mempelajari masalah ini. Pertama, saya mencari artikel "Semua orang mengatakan semua orang kepada Vertical-Salign" oleh senior Wheatlee. Dalam artikelnya, Wheatlee menyebutkan beberapa poin penting tentang pemusatan vertikal:
1. Ketika Vertikal-Align: Tengah, pusat elemen disejajarkan dengan pusat elemen di sekitarnya.
2. Definisi pusat di sini adalah: gambar tentu saja setengah ketinggian, dan teks harus dipindahkan dengan 0,5Ex berdasarkan baseline, yaitu, pusat huruf kecil X. Namun, banyak browser sering mendefinisikan unit ex sebagai 0,5em, jadi itu belum tentu pusat X (jika Anda tidak mengerti kata benda seperti baseline, silakan baca artikel Wheatlee terlebih dahulu)
Menurut ide ini, dibandingkan dengan masalah yang saya temui, hal pertama yang terlintas dalam pikiran adalah memverifikasi apakah browser menggunakan aturan yang sama untuk kotak centang dan gambar untuk dirender (apakah Anda memperlakukan kotak centang sebagai gambar persegi). Jadi saya menulis kode berikut:
<tyle>
body {font-size: 12px;}
</tyle>
<Input Style = Vertical-Align: Middle; Name = Tes Tes = Centang Kotak>
<gaya img = vertikal-align: tengah; src = testpic.gif />
Teks Tes
Testpic.gif dalam kode adalah gambar hitam dengan ukuran yang persis sama dengan kotak centang. Tampilan berikut di bawah FF3.5:
Sebelumnya Halaman 1 2 3 4 Halaman Berikutnya Baca teks lengkapnya