CODEWITHSUNDEEP
cssinternet-explorer-10
maxp
maxp

Reputation: 25181

IE9 / IE10 slightly larger font sizes?

Black is firefox, light blue /azure is chrome (barely noticable against firefox), and the dark purple is IE10.

Their font sizes (11px) and font-family (Helvetica) are all exactly the same, however you will notice how much larger IE10 renders its font.

It also seems to apply very heavy anti-aliasing to each character.

I know part of the 'challenge' is creating a site that will work across multiple browsers, but has anyone got any solutions that could correct IE10's increased font size?

Overlaid

Upvotes: 1

Views: 1643

Answers (2)

developer10214
developer10214

Reputation: 1186

I faced the same problem, in IE some parts on my page were broken. I changed the font-size unit from px to pt, but you have to recalculate the values(divide the px value by approx. 1.36367, 15/11 exactly). Now the font is rendered with the same size in IE8-10 and FF, no broken parts.

Upvotes: 1

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13556

IE9+ uses sub-pixel rendering for fonts, and it results in slightly different size of text boxes (sometimes with non-integer pixel size) compared to other browsers. But here the problem seems to be more in line-height value, which probably is default (based on the font itself) and results in different values in different browsers because of rounding. Setting the explicit line-height value in pixels should minimize the difference.

Upvotes: 0

Related Questions