Warum Schrift-Icons haben zusätzliche Höhe?

Ich verwende eine Reihe von Symbol-Schriftarten, die ich mit Ico moon erstellt habe. Die Symbole sehen in Firefox und Chrome gut aus und funktionieren gut, aber die Symbole erscheinen in IE 10 mit zusätzlicher Höhe.Warum Schrift-Icons haben zusätzliche Höhe?

Ich bin mir nicht sicher, woher die Höhe kommt.

Hier in IE 10 scheinen die Symbole eine viel größere Höhe zu haben. IE icons with extra height

Hier ist, wie sie in Chrom mit der richtigen Höhe aussehen. Hier enter image description here

ist die CSS für die Symbole:

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

Und hier ist die Traced Styles von IE10 Dev-Tools. enter image description here

Ich machte eine kurze Demo auf copepen.io eines ähnlichen Problems. Demo is here

Hat jemand ähnliche Probleme? Hat jemand eine Lösung dafür gefunden?

Quelle

2013-04-19 Ryan Gill

müssen Sie den Rest Ihres Codes sehen. vorzugsweise in einer Geige. – albert

Haben Sie versucht, den Symbolen eine Höhe zu geben? Wenn IE eine "Breite" und/oder "Höhe" findet, ist es unsicher, was zu tun ist. – DiederikEEn

@DiederikEEn Das macht keinen Sinn. Dies ist ein Icon ** font **, was IE betrifft, es soll einen 'Inline-Block' mit 13px Buchstaben darstellen. – millimoose

Problem line-height: 1

Sie schreiben

line-height: 20px ;

Quelle

2013-12-15 15:07:13

Ihr Bild öffnen in Microsoft Office-Bild (oder einem anderen Editor) und Ihr Bild Größe ändern, manchmal IE-Browser zeigt Bilder, wie sie reale Größe .

Quelle

2014-01-04 12:13:47 mirza

Ich hatte das Problem so und - ich habe es behoben))) In meinem Svg-Dateien-Ordner war eine einzige falsche Datei. (Mit versteckten Element, das die Parameter X-1220 und Y-770 hatte), so war es ein Problem! Ich habe dieses Element entfernt und alles war gut.

Quelle

2015-10-22 13:43:57 Nazariy

Warum Schrift-Icons haben zusätzliche Höhe?

Antwort

Verwandte Themen