internet-explorer - 为什么字体图标有额外的高度？

Question

我正在使用我使用 Ico moon 创建的一组图标字体.这些图标在 Firefox 和 Chrome 中的外观和效果都很好，但这些图标在 IE 10 中出现时具有额外的高度。

我不确定高度来自哪里。

在 IE 10 中，图标的高度似乎更高。


这是它们在具有正确高度的 chrome 中的样子。


这是图标的CSS:

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

这是来自 IE10 开发工具的跟踪样式。

我在 codepen.io 上做了一个类似问题的快速演示。 Demo is here

有没有人遇到类似的问题？有没有人找到解决这个问题的方法？

Answer 1

行高问题:1

你写

line-height: 20px ;