CSS font size using em different on different pages

问题

CSS is not my forte so this might be something simple. I have set my footer font size in a stylesheet using 0.8em but on different pages it is a different size. I'm only editing someone elses work and he did a poor job at not closing tags so its a bit painful.

Is there a way to clear all font settings so that the footer is the same across all pages? Or is this a problem that can be solved some other way?

Cheers for any help.

回答1:

I notice no one has touched on how em works as a font size unit, so I'll try to clear that up for you.

There are two ways to tell the browser how large your fonts should be rendered.

1. setting an absolute size
   For absolute sizes, like px or pt, you're telling the browser exactly what size you want the text to be. If you write 12px, it's going to come out as exactly 12 pixels tall.
2. setting a relative size — em is a relative size.
   For relative sizes, like em, you're telling the browser how big to make the text with respect to other text on the page. This works sort of like a percentage, so if your footer text is sized at 0.8em, it will be rendered 80% as tall as the main text on the page.

This explains why you're getting different sizes on different pages. If the font size of the body is set explicitly on one page, but not set at all on another (or set explicitly to a different size) that will make your em-sized fonts render at different sizes.

This is also why it's really bad to use <font> tags. It's going to be a serious pain to dig around those tags and figure out what explicit sizes are being set that might be throwing off your ems.
When you set your font sizes using CSS, this is not only an information which is easy to find, but also a property which is easy to modify.

回答2:

As David Thomas says, the use of <font> is deprecated. If you have a software tool to do global edits, you might try deleting all the <font> tags and then add classes back to the HTML that actually needs to be different fonts and add the font info to the CSS.
The other option is to get through one at a time, which I imagine to be time consuming. At least you would have cleaner HTML when you were done.

In a weak defense, the previous designer may have used a WYSIWYG web design tool that created the HTML for him/her and didn't see the resulting code.

回答3:

Try using an exact size with px or pt units rather than em.
Sizes in percent and em can get screwed up by unintended levels of inheritance but not px or pt.

回答4:

My solution was basically to do inline styles to correct any problems. Using px rather than em was an option but we preferred to keep accessibility rather than best practice against using inline styles (any best practice was out the window anyway).

来源：https://stackoverflow.com/questions/3713840/css-font-size-using-em-different-on-different-pages