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

时间:2009-12-02 23:53:53

标签: css fonts

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

alt text

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

3 个答案:

答案 0 :(得分:3)

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

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

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

祝你好运!

答案 1 :(得分:1)

在您的主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样式在所有浏览器中显得相同。

答案 2 :(得分:0)

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