Menu
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.
501
In Settings, click the “Appearance” option in the sidebar or scroll down until you see the “Appearance” section of the Settings page. Next, locate the option called “Font Size.” Click the “Font Size” drop-down menu, and you will see five options pop up: “Very Small,” “Small,” “Medium,” “Large,” and “Very Large.”
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
Press and hold the Ctrl key, then move the mouse wheel up or down. Alternatively, you can press and hold the Ctrl key (or Command on Mac), then press + or - (plus or minus) to increase and decrease the font size. All major browsers also support pressing Ctrl + 0 (zero) to change the font to its default size.
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.
147
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
