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

是否有任何合理的方式来控制所有浏览器的字体间距，使得文本将按预期排列，缺乏绝对定位？从一个项目采取以下示例我正在：不同浏览器中的字体和行间距

alt text

首先是火狐3.5，第二个是IE 8，第三个是IE 6被示出被包含内的绝对的形式定位div，并使用ol/li元素进行布局。我在每个列表元素上都有一个5px的底部边距来提供间距，但除此之外，所有内容都以内联方式呈现。我意识到每个浏览器都会呈现不同的字体，这就是间距蠕变的原因，但当试图在固定区域内放置东西时，它可能会变得相当新奇（这种特殊形式给了我很大的鼓励）一个模态对话框）。

来源

2009-12-02 Chris

另一个选项是为每个父元素添加一个高度声明。如此一来，只要您选取三者中最高者并将其设定为默认高度，则所包含文字的高度就无关紧要。

来源

2009-12-03 00:04:18

执行一个reset CSS样式表，然后自己明确设置所有您的样式。

这将消除不同浏览器应用稍微不同的默认值的趋势。例如，一个浏览器将在项目符号列表项上使用填充，另一个将使用页边空白。（我忘了哪一个是做什么的，这就是为什么我总是使用重置的原因）如果你首先重置所有东西，那么你可以自己决定字体大小，行高，边距等等，并且让它们一致地出来在各种浏览器中。

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

祝你好运！

来源

2009-12-03 02:22:29 Funka

包括这样的事情你的主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样式出现相同在所有浏览器中。

来源

2009-12-03 02:37:39

是否有人在乎写为什么有两个downvotes？ – 2013-06-12 05:34:55

作为回答这个问题的人，我也有点困惑:) – 2013-06-14 01:06:16

这一定是因为人们害怕他们不明白的东西。它的相当不可读。我会尽力修复它。 – 2013-08-21 20:37:43

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

回答

相关问题