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

Question

我正在使用一组使用Ico moon创建的图标字体。这些图标在 Firefox 和 Chrome 中看起来和工作得很好，但是图标在 IE 10 中出现了额外的高度。

我不确定高度来自哪里。

在 IE 10 中，图标的高度似乎要高得多。带有额外高度的 IE 图标

这是它们在具有正确高度的 chrome 中的样子。在此处输入图像描述

这是图标的 CSS：

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

这是来自 IE10 开发工具的 Traced Styles。在此处输入图像描述

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

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

score 1 · Accepted Answer

1

行高问题：1

你写

line-height: 20px ;

于 2013-12-15T15:07:13.620 回答

score 0 · Accepted Answer

在 Microsoft office 图片（或其他编辑器）中打开您的图片并调整图片大小，IE 浏览器有时会将图片显示为真实大小。

score 0 · Accepted Answer

我遇到了这样的问题 - 我修复了它）））在我的 svg 文件夹中是一个错误的文件。（使用具有参数 X-1220 和 Y-770 的隐藏元素）所以这是个问题！我删除了这个元素，一切都很好。

3 回答 3