CSS: Perbedaan line-height pada Chrome dan Mozilla
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?
Comments