Geek Answers Handbook

Why is "font-size: 1em" larger in IE10 than in Chrome?

I am currently working on a website and I cannot understand why the text is displayed more in IE10 than in Chrome. (I made sure that both browsers are set to 100% scaling - no more, no less.)

I have reset in my CSS: body { font-size: 1em; } body { font-size: 1em; } . In Chrome (v27.0.1453.116 m) this is displayed as expected - if I change this rule in CSS to font-size: 100%; or font-size: 16px; , nothing will obviously change. This, for me, indicates that in Chrome 1em = 16px. But proportional font sizes ( em and % ) are displayed much more in IE, despite the fact that 1em = 21px seems.

I have two images showing the difference when body { font-size: 1em; } body { font-size: 1em; } , but since I don't have a 10 reputation yet, I can't post full URLs. However, they are hosted on imgur, and their file names are as follows:

  • font-size: 1em; in Chrome:

enter image description here

  • font-size: 1em; in IE10:

enter image description here

If I set the font-size using px , I get consistent results - both Chrome and IE10 will be displayed sequentially. But using px for font sizes these days puts me as a less preferred practice.

You can see the HTML and CSS in this jsFiddle, which I did . I included all the CSS that might have been a bit unnecessary, but I thought it was better to provide more context, not less.

Can someone help me figure out why IE10 displays 1em more than Chrome, and what can I do about it?

Thanks a lot.

EDIT . The figures are that once I posted this difficult question, I would figure out what was going on. I set the scaling of IE to 100%, but IE also has a "Text Size" parameter, which for some reason was set to "Largest". Setting it to Medium fixed the problem.

+7
html css google-chrome internet-explorer internet-explorer-10
source share
2 answers

I "solved" my own problem because I am a fool.

IE10 has two settings, like the View menu, that change the size of the display. I made sure that the “Scale” parameter was set to 100%, but completely missed the “Text Size” parameter, which was set to “Largest”. By setting it to Medium, I fixed my problem and made IE and Chrome display the same way.

+13
source share

The size of em in pixels is related to the type and size of the font, the resolution of your screen (depending on the OS, browser) and possible additional settings of the OS and browser - for example, "Show fonts + 10%" can change the value of em.

According to Rudu in this post .

+2
source share

More articles:


All Articles