Em vs Px and cross browser compatibility

Question

I\'m a CSS newbie and was wondering if there is a benefit using em instead of px when it comes the cross browser compatibility of my CSS.

Answer 1

Strictly speaking the use of em over px isn't really a cross-browser compatibility issue - all browsers support the use of them both for font-sizing.

It used to be advisable to avoid using px for font sizing as the browser with the biggest market share, IE6, wouldn't allow text resizing. It sees px as an absolute value, not a relative value like em, and so wouldn't scale text up or down sized in px.

Depending on your audience you may not need to worry about it. There's some great info on the benefits of the em, and how they can help towards building a fluid layout here: http://www.alistapart.com/articles/fluidgrids/

Answer 2

Yes. Some browsers (-cough IE8 -cough)still do not scale text properly when it's in pixels. They zoom fine, but changing the text size gives no results.

Ems is more or less guaranteed to scale when the user requests it to. Also, ems can be used for navigation buttons or boxes that accommodate text that must scale well with the text- it's not just a font size. Try different variants in a bunch of browsers zooming in an out and enlarging text and see what results you get.

Answer 3

EM can be resized in some older browsers (IE 6 included) while PX do not. But frankly people that have accessibility needs to be able to resize font size are using more modern browsers.

For a CSS newbie stick with PX. EM can be a pain as they are fluid and you can have some weird effects and not sure why.

Read this for more information on PX - EM - % - http://css-tricks.com/2580-css-font-size/

Hope this helps.

Answer 4

I believe some of the guidelines I learned when first beginning Web work have fallen by the wayside and the recommendaion against sizing fonts by px is one of them. The reason is simple - all contemporary browsers now graphically zoom entire pages very cleanly and thus text sizing as a feature of the browser is moot.

The text enlargement problem only exists with IE6 (you can zoom IE8). IE6 is now under 10% share globally. Those who are "hard of sight" make up about 2% of the US population. That means trying to deal with IE6 benefits 0.2% of users in the US. If there were a browser out there with 0.2% share, we would all ignore it.

The benefit of ignoring "scalable" font sizing in favor of px is very high because it is simpler, both to implement and to understand. It is less likely to be affected by mysteries of the cascade, for one thing. It is especially useful in situations where height must be precisely controlled, such as in a menu bar.

I have only recently started removing em and % from sites I'm building in favor of px, so there might be gotchas I haven't hit. So far, I find the result encouraging.

I would thus recommend px, not only for beginners but in general.