Teks Asli: http://www.mikkolee.com/13
Saya telah dengan hati-hati mempelajari atribut vertikal-Align dalam beberapa hari terakhir, dan hasilnya mengejutkan saya. Standar CSS yang sangat berpengalaman ini sebenarnya berkinerja berbeda di setiap browser.
Ada banyak nilai untuk vertikal-align, termasuk baseline sub sub teks bagian atas teks bawah dan berbagai nilai panjang (%, em, ex, dll.). Izinkan saya menunjukkan kepada Anda salah satu nilai yang paling berlebihan yang menurut saya: bawah. Kodenya adalah sebagai berikut:
P {
font-size: 18px;
Line-Height: 36px;
Font-Family: Tahoma, Sans-Serif;
}
img {
Vertikal-Align: Bawah;
}
Lalu mari kita lihat efek CSS ini di berbagai browser (gambar dibuat dengan sengaja, sehingga saya dapat melihat posisi relatif dengan jelas):
Nah, hasil ini sebenarnya sangat luar biasa. Secara umum, saya pikir Firefox akan menjelaskannya lebih tepat daripada IE, tetapi setelah melihat opera, saya menemukan bahwa itu sama dengan IE, sementara Safari/Win ada di pihak Firefox. Sejujurnya, saya tidak tahu apa yang terjadi.
Saya dengan hati-hati mempelajari "Panduan CSS otoritatif (Edisi Kedua)" dan bahkan mencari W3C, dan kemudian membuat gambar tentang vertikal-sejajar sendiri:
Menurut W3C, ketika secara vertikal-align dari elemen inline diatur ke: baseline, atas, bawah, garis dasar (atau tengah, atas, bawah) dari elemen adalah posisi yang sama dengan elemen di sekitarnya, seperti bagian atas gambar dan bagian atas teks di sekitarnya. Ketika Text-Top dan Text-Bottom adalah teks-top (atau bawah) elemen menyelaraskan teks-top (atau teks-bottom) dari elemen di sekitarnya. Ketika panjang (%, EM, EX), bergerak ke atas berdasarkan baseline, jadi angka positif naik dan angka negatif turun. Ketika tengah, pusat elemen selaras dengan pusat elemen sekitarnya. 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, sehingga tidak selalu menjadi pusat x (sebagai contoh, ketinggian x harus 10px, sedangkan EM adalah 18px, sehingga kedua nilainya berbeda).
Namun, bahkan menurut pedoman di atas, luar biasa bahwa penjelasan dari masing -masing browser sangat berbeda. Saya terlalu malas untuk belajar mengapa ini masalahnya. Secara umum, mereka harus memiliki definisi yang berbeda tentang posisi masing-masing baris dalam font, jadi masalah ini tidak hanya terkait dengan vertikal-align, tetapi juga dengan penjelasan browser tentang struktur teks inline dan gambar inline.
Akhirnya, saya akan memberi Anda halaman tes, dan Anda dapat melihat penjelasan dari nilai-nilai yang berbeda dari vertikal-sejajar oleh setiap browser.
http://www.mikkolee.com/weblab/001_vertical/
Anda dapat menguji nilai-nilai lain, seperti Tengah atau Teks, yang sama sekali berbeda dari setiap browser. Jika Anda memiliki pengalaman, silakan diskusikan ~~