Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

css - Font and line spacing in different browsers

Is there any reasonable way to control font spacing across all browsers such that text will line up as intended, short of absolute positioning? Take the following example from a project I'm working on:

alt text

The first is Firefox 3.5, the second is IE 8, and the third is IE 6. The form being shown is contained within an absolutely positioned div and is laid out using ol/li elements. I have a 5px bottom margin on each list element to provide spacing, but other than that, everything is rendered inline. I'm aware that each browser renders fonts differently and this is what accounts for the creep in spacing, but it can become quite a nuissance (this particular form gave me hell) when trying to lay things out in a fixed area (for something like a modal dialog).

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Implement a reset CSS stylesheet, and then explicitly set all of your styles yourself.

This will eliminate the tendency different browsers have to apply slightly different defaults. For example, one browser will use padding-left on bulleted list items, another will use margin-left. (I forget which one does what. That's why I always use reset!) If you reset everything first, you can then make your own decisions about font-sizes, line-heights, margins, etc., and have them come out pretty consistently in the various browsers.

A great place to get started is with Yahoo's reset.css here or try this other one here. A google search for "reset css" will lead you to lots of discussion, pros, and cons with respect to this approach.

Good luck!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...