Yazı tipi simgeleri neden ekstra yüksekliğe sahip?

Question

Ico moon kullanarak oluşturduğum bir simge yazı tipleri seti kullanıyorum. Simgeler, Firefox ve Chrome'da harika görünür ve çalışır, ancak simgeler, ekstra yükseklikte IE 10'da görünür.

Yüksekliğin nereden geldiğini bilmiyorum.

IE 10'da simgeler çok daha büyük bir yüksekliğe sahip görünüyor.

Doğru yükseklikteki kromda neye benzerler. İşte

simgeler için CSS:

font-family: 'IconFont'; 
speak: none; 
font-style: normal; 
font-weight: normal; 
line-height: 1; 
-webkit-font-smoothing: antialiased; 

Ve burada IE10 Dev araçlarından tuketilmektedir Stiller olduğunu.

Bir simliar probleminin codepen.io'sunda hızlı bir demo yaptım. Demo is here

Benzer sorunlar yaşayan biri var mı? Bunun için bir düzeltme yapan var mı? line-height ile

Answer 1

Sorun: 1

Eğer

line-height: 20px ; 

Answer 2

Microsoft office resme (veya başka Editör) da görüntüyü açın ve resmi yeniden boyutlandırma yazma IE tarayıcı bazen onları gerçek boyutu olarak resimleri gösterir .

Answer 3

Böyle bir sorun vardı ve - Ben düzeltildi))) Benim svg dosyaları klasöründe bir yanlış dosya oldu. (X-1220 ve Y-770 parametreleri olan gizli elemanla) bu yüzden bir problemdi! Bu öğeyi kaldırdım ve her şey yolundaydı.