Saya baru tahu kalau Chrome dan Mozilla merender atribut css line-height
dengan berbeda. Hal ini baru saya sadari saat saya membuat .dropcap
untuk blog ini.
Efek perbedaan line-height pada Chrome dan Mozilla
Bisa dilihat pada gambar, di Mozilla, efek perbedaanya terlihat karena ukuran hurup dropcap nggak sesuai (setinggi dua baris). Awalnya saya ubah dengan mengganti ukuran line-height
yang semula 1em
menjadi nilai lain yang bisa cocok.
Tetap nggak bisa. Tapi ternyata, ini bisa diselesaikan dengan mengubah satuan value pada line-height
tadi, dari em
menjadi px
.
Contoh-contoh syntax line-height beserta tipenya.
line-height: normal
line-height: 3.5 /*
line-height: 3em /*
line-height: 34% /*
line-height: inherit
Dalam kasus saya, kode .dropcap
yang semula seperti ini:
1 2 3 4 5 6 7 |
|
menjadi seperti ini:
1 2 3 4 5 6 7 |
|
Hmm, kira-kira kenapa ya?