My First Website! Problem with font-size on IE

thehunterhamiltongroup.com

This is my first website, I’d love your opinions! My problem is that the font gets significantly smaller when I view it on IE as opposed to google chrome. Could this be because I’m using REM?

I could see if you where using em, but not rem. Hmmm?

Yes, maybe. IE still has issues with rem. I’d recommend that you stick with em.

http://caniuse.com/#search=rem

My guess is it has more to do with browser settings than the browsers themselves

In Chrome
settings → advanced → web content → font size

In IE (11)
view → text size

Are they both the same?

Not that both browsers consider “medium” to be the same size, but it might be worth looking at those settings anyway.

1 Like

Your menu size is very small for me on chrome and IE and after inspecting its size is 10px which is very small for a person to try and read. If you set the font-size to 14px or 16px would make it way easier to read.

Or convert them all to rem.

1 Like

Looks exactly the same to me in ie11.

If you have an older version of IE then rems aren’t supported so you need to do fallbacks.

e.g.

.test{
font-size:1em;
font-size:1rem;
}

Of course you need to take care of compounding if using ems so maybe a pixel fallback approach is better.

Note that any versions of IE other than IE11 and edge are considered old browsers and support is very low for them.

3 Likes

Thank you! How can I do a fallback for this? Would it involve a js check and if so what do I check for?

Just as Paul shows above.
Any property/value that a browser does not understand, just gets ignored.
So IE will get 1em and ignore 1rem
But another browser will get 1em then override it with 1rem.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.