不同浏览器中的字体和行间距

Question

是否有合理的方法来控制所有浏览器的字体间距，以便文本按预期排列，而不是绝对定位？从我正在处理的项目中获取以下示例：

第一个是Firefox 3.5，第二个是IE 8，第三个是IE 6.显示的表单包含在一个绝对定位的div中，并使用ol / li元素进行布局。我在每个列表元素上有一个5px的下边距以提供间距，但除此之外，所有内容都是内联呈现的。我知道每个浏览器都会以不同的方式呈现字体，这就是占据间距蠕变的原因，但是当它试图在一个固定的区域内放置东西时，它可能会变成一种相当大的形象（这种特殊的形式让我很难得）模态对话框）。

Answer 1

实施reset CSS样式表，然后自己明确设置所有样式。

这将消除不同浏览器必须应用稍微不同的默认值的趋势。例如，一个浏览器将在项目符号列表项上使用padding-left，另一个将使用margin-left。 （我忘了哪一个做了什么。这就是为什么我总是使用重置！）如果你先重置一切，你可以自己决定字体大小，行高，边距等，并让它们相当一致在各种浏览器中。

开始的好地方是雅虎的reset.css here或尝试另一个here。谷歌搜索“重置CSS”将引导您进行大量关于此方法的讨论，优点和缺点。

祝你好运！

Answer 2

在您的主CSS文件的顶部包含这样的内容，或将其包含在自己的CSS文件中：

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

这将清除所有基于浏览器的样式，使您的CSS样式在所有浏览器中显得相同。

Answer 3

另一个选项是为每个父元素添加一个高度声明。这样，只要您取得三个中最高的文本并将其设置为默认高度，所包含文本的高度就无关紧要。