Почему шрифты имеют дополнительную высоту?

Я использую набор значков Fonts, которые я создал с помощью Ico moon. Значки выглядят и отлично работают в Firefox и Chrome, но значки появляются в IE 10 с дополнительной высотой.

Я не уверен, откуда эта высота.

Здесь, в IE 10, значки имеют большую высоту. IE icons with extra height

Вот как они выглядят в хроме с правильной высотой. enter image description here

Вот CSS для значков:

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

И вот Traced Styles из инструментов IE10 Dev. enter image description here

Я сделал быструю демонстрацию на codepen.io проблемы simliar. Демо здесь

Есть ли у кого-нибудь подобные проблемы? Кто-нибудь нашел исправление для этого?

ОТВЕТЫ

Ответ 1

Проблема с высотой строки: 1

вы пишете

line-height: 20px ;

Ответ 2

откройте свое изображение в картинке Microsoft Office (или другом редакторе) и измените размер изображения, браузер IE иногда показывает изображения как их реального размера.

Ответ 3

У меня была такая проблема, и я ее исправил))) В моей папке svg files был один неправильный файл. (С скрытым элементом, который имел параметры X-1220 и Y-770), так что это была проблема! Я удалил этот элемент, и все было в порядке.