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.
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:
.dropcap {
font-size: 3.4em;
line-height: 1em;
padding: 0px 0.111em 0 0;
color: #888;
float: left;
}menjadi seperti ini:
.dropcap {
font-size: 3.4em;
line-height: 52px;
padding: 0px 0.111em 0 0;
color: #888;
float: left;
}Hmm, kira-kira kenapa ya?