Why is “font-size: 1em” bigger in IE10 than Chrome?

社会主义新天地 提交于 2019-12-23 07:56:04

问题


I'm currently working on developing a site, and I can't figure out why the text displays bigger in IE10 than it does in Chrome. (I've made sure that both of the browsers are set to 100% zoom--no more, no less.)

I've got a reset in my CSS: body { font-size: 1em; }. In Chrome (v27.0.1453.116 m), this displays as expected--if I change that rule in the CSS to font-size: 100%; or font-size: 16px;, nothing visibly changes. This, to me, indicates that in Chrome, 1em = 16px. But the proportional font-sizes (em and %) display much bigger in IE, at what appears to be 1em = 21px.

I have two images show the difference when body { font-size: 1em; }, but since I don't have 10 reputation yet, I can't post the full URLs. They're hosted on imgur, though, and their filenames are as follows:

  • font-size: 1em; in Chrome:

  • font-size: 1em; in IE10:

If I set font-size using px, then I get consistent results--both Chrome and IE10 will display consistently. But using px for font sizes strikes me as less-than-preferred practice these days.

You can see the HTML and the CSS in this jsFiddle I made. I included all of the CSS, which may have been a little unnecessary, but I thought it'd be better to provide more context rather than less.

Can anyone help me figure out why IE10's displaying 1em bigger than Chrome, and what I can do about it?

Thanks a bunch.

EDIT - Figures that as soon as I posted this elaborate question, I'd figure out what was going on. I had set the IE zoom to 100%, but IE also has a "Text size" option that, for some reason, was set to "Largest". Setting it to "Medium" fixed the problem.


回答1:


I've "solved" my own problem, 'cause I'm a fool.

IE10 has two settings, both under the "View" menu, which change the size of what's displayed. I'd made sure that the "Zoom" setting was set to 100%, but completely overlooked the "Text size" setting, which was set to "Largest". Setting it to "Medium" fixed my issue, and made it so both IE and Chrome displayed identically.




回答2:


The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible further OS and browser settings - eg "Show fonts +10%" may alter the em value.

According to Rudu in this post.



来源:https://stackoverflow.com/questions/17432337/why-is-font-size-1em-bigger-in-ie10-than-chrome

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!