Web Font Heights Cross Browser Behavior - css

Question

Why do web fonts render differently between browsers, and what steps can be taken to fix the issue?
I'm having some issues with cross browser web font issues. I am absolutely positioning spans with single characters within them. Between browsers, the characters seem to be positioned the same relative to each other (within a few pixels).
However in IE, the grouping of characters is way off in relation to the rest of the flow of the document. The behavior when the characters are highlighted seems dramatically different in IE as well.
Does this have to do with font metrics? All 3 browsers are being rendered with a WOFF font.
Rendered in Chrome:
Rendered in Firefox:
Rendered in Internet Explorer:
Here is a snippet of the code:
<div style="border: 3px #000 solid; padding: 0px; line-height: 1; position: relative; width: 85.75px; height: 80px; font-size: 80px;">
<span class="MathJax_Main" style="position: absolute; left: 0; top: 0;">3</span>
<span class="MathJax_MathItalic" style="position: absolute; left: 40px; top: 0;">x</span>
</div>
Here is the CSS used to load the web font:
#font-face {
font-family: 'MathJax_Math';
src: url('woff/MathJax_Math-Italic.woff') format('woff'),
url('svg/MathJax_Math-Italic.svg#MathJax_Math') format('svg');
font-style: italic;
font-weight: normal;
}
#font-face {
font-family: 'MathJax_Main';
src: url('woff/MathJax_Main-Regular.woff') format('woff'),
url('svg/MathJax_Main-Regular.svg#MathJax_Main') format('svg');
font-weight: normal;
}
.MathJax_MathItalic {
font-family: 'MathJax_Math';
font-style: italic;
}
.MathJax_Main {
font-family: 'MathJax_Main';
}