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

【问题标题】：Font and line spacing in different browsers不同浏览器中的字体和行距
【发布时间】：2013-08-22 04:40:53
【问题描述】：

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

第一个是 Firefox 3.5，第二个是 IE 8，第三个是 IE 6。显示的表单包含在绝对定位的 div 中，并使用 ol/li 元素进行布局。我在每个列表元素上都有一个 5px 的底部边距以提供间距，但除此之外，所有内容都是内联呈现的。我知道每个浏览器都会以不同的方式呈现字体，这就是间距蠕变的原因，但是当尝试在固定区域（例如模态对话框）。

【问题讨论】：

标签： css fonts

【解决方案1】：

实现reset CSS 样式表，然后自己显式设置所有样式。

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

使用 Yahoo 的 reset.css here 或试试其他的 here 是一个很好的起点。在 google 上搜索“reset css”，您会看到很多关于这种方法的讨论、优缺点。

祝你好运！

【讨论】：

【解决方案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 样式在所有浏览器中显示相同。

【讨论】：

作为回答这个问题的人，我也有点困惑:)
那一定是因为人们害怕他们不理解的东西。而且它非常难以理解。我会努力解决的。

【解决方案3】：

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

【讨论】：