Analisis mendetail tentang atribut perataan vertikal. Dalam beberapa hari terakhir, saya telah mempelajari atribut perataan vertikal dengan cermat. Hasilnya mengejutkan saya. Standar CSS yang sangat "senior" ini sebenarnya berperilaku berbeda di berbagai browser.
Ada banyak sekali nilai untuk perataan vertikal, antara lain baseline sub supper top text-top bottom text-bottom middle dan berbagai nilai panjang (%, em, ex, dll). Izinkan saya menunjukkan kepada Anda nilai yang menurut saya paling dilebih-lebihkan: bawah. Kodenya adalah sebagai berikut:
Contoh Kode Sumber
[www.52css.com] P {
ukuran font: 18px;
tinggi garis: 36px;
keluarga font: Tahoma, sans-serif;
}
gambar {
perataan vertikal: bawah;
}
Kemudian lihatlah efek CSS ini di berbagai browser (gambarnya sengaja dibuat seperti itu, agar posisi relatifnya terlihat jelas):
Sebenarnya hasil ini sangat mengejutkan. Secara umum, menurut saya Firefox akan menjelaskannya lebih tepat daripada IE, tetapi setelah melihat Opera, saya menemukan bahwa ini sama dengan IE, sedangkan Safari/Win ada di samping Firefox. . Sejujurnya, saya tidak tahu apa yang terjadi.
Saya dengan cermat mempelajari "Panduan Definitif CSS (Edisi Kedua)", dan bahkan berkonsultasi dengan W3C, dan kemudian membuat sendiri diagram tentang perataan vertikal:
Menurut definisi W3C, ketika perataan vertikal elemen sebaris diatur ke:
1. Saat menggunakan garis dasar, atas, dan bawah, garis dasar (atau tengah, atas, bawah) elemen disejajarkan dengan posisi elemen di sekitarnya yang sama, seperti bagian atas gambar dan bagian atas teks di sekitarnya.
2. Saat teks atas dan bawah teks digunakan, bagian atas (atau bawah) elemen disejajarkan dengan teks atas (atau bawah teks) elemen di sekitarnya.
3. Panjang (%, em, ex) digeser ke atas berdasarkan garis pangkal, sehingga bilangan positif naik dan bilangan negatif turun.
4. Saat berada di tengah, bagian tengah elemen sejajar dengan bagian tengah elemen di sekitarnya. Definisi "tengah" di sini adalah: gambarnya tentu saja tingginya setengah, dan teks harus dipindahkan ke atas 0,5ex berdasarkan garis dasar, yang merupakan titik tengah tepat dari huruf kecil "x". Namun, banyak browser yang sering mendefinisikan satuan ex sebagai 0,5em, sehingga belum tentu merupakan pusat x (misalnya, pada gambar di atas, tinggi x harus 10px, dan em adalah 18px, jadi keduanya nilainya berbeda).
Namun, bahkan dengan mengikuti pedoman di atas, saya terkejut karena browser menafsirkan berbagai hal dengan sangat berbeda. Saya terlalu malas untuk meneliti mengapa hal ini terjadi. Secara umum, seharusnya mereka memiliki definisi yang berbeda tentang posisi setiap baris font, jadi masalah ini tidak hanya terkait dengan perataan vertikal, tetapi juga interpretasi browser terhadap struktur teks sebaris dan gambar sebaris ada hubungannya dengan itu.
