CSS: Perbedaan Line-height Pada Chrome Dan Mozilla

By Muhammad Nasrurrohman

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 MozillaEfek 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 /* values */

line-height: 3em /* values */

line-height: 34% /* values */

line-height: inherit

Dalam kasus saya, kode .dropcap yang semula seperti ini:

1
2
3
4
5
6
7

.dropcap {
  font-size: 3.4em;
  line-height: 1em;
  padding: 0px 0.111em 0 0;
  color: #888;
  float: left;
}

menjadi seperti ini:

1
2
3
4
5
6
7

.dropcap {
  font-size: 3.4em;
  line-height: 52px;
  padding: 0px 0.111em 0 0;
  color: #888;
  float: left;
}

Hmm, kira-kira kenapa ya?