Why font-icons have extra height?

Question

I'm using a set of icon Fonts that I created using Ico moon. The icons look and work great in Firefox and Chrome, but the icons appear in IE 10 with extra height.

I'm not sure where the height is coming from.

Here in IE 10, the icons are appearing to have a much greater height.

Here is what they look like in chrome with the correct height.

Here is the CSS for the icons:

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

And here is the Traced Styles from IE10 Dev tools.

I made a quick demo on codepen.io of a simliar problem.Demo is here

Is anyone experiencing similar issues? Has anyone found a fix for this?

Answer 1

Problem with line-height : 1

you write

line-height: 20px ;