html - 如何跨浏览器一致地设置有序列表的行间距？

Question

我有一个有序列表，它使用大格鲁吉亚作为编号，使用较小的 Arial 字体作为文本(推荐于 How to align two columns of text in CSS)。我在 li 中使用 p 标签，所以我可以设置字体大小，这也设置了相关的行高(如果 li 超过一行，确保有正常的行间距)。这几乎没问题，但是在 Firefox 中，元素符号之间的间距比任何其他浏览器都要小得多，尽管明确将边距设置为 0，但所有其他浏览器似乎都在 p 标签上方添加了边距。当我使用开发人员工具查看它时Chrome 似乎添加了 -webkit-margin-before: 1em; -webkit-margin-after: 1em;到未被覆盖的 p 标签。这可能不是原因，因为它也发生在除 FF 之外的非 webkit 浏览器中，我读过的所有其他内容都说这些是通过设置边距来覆盖的(在下面的代码中和我的 css 文件的顶部设置)所有元素 css 边距重置)。如果有人能指出为什么我在所有非 FF 浏览器上的间距都越来越大，我将非常感激，因为我已经尝试了很长时间，但就是看不出为什么会这样!仅供引用，我已经尝试明确设置每个元素的行高，但这具有完全相同的效果。你可以看到下面的代码。

非常感谢您的帮助以及任何人可以提供的任何建议!

戴夫

ol {
color: #ec008c;
margin: 0;
padding: 0 0 0 1.6em;
list-style-position: outside;
font-family: georgia, serif;
font-size: 16px;
font-weight: bold;
}

ol li {
margin: 0;
padding: 0;
}

ol li p {
font-family: arial, sans-serif;
font-weight: normal;
font-size: 10px;
color: #000000;
margin: 0 0 4px 0;
padding: 0;
display: block;
}

<div id="playlist">
<div id="playlistinner">
<p id="playlisttitle">The List</p>
<ol>
<li class="listitem"><p><strong>Entry 1</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 2</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 3</strong> - entry details that are much longer and span more than one line</p></li>
<li class="listitem"><p><strong>Entry 4</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 5</strong> - entry details</p></li>
</ol>
</div>
</div>

Answer 1

你提到非 webkit，非 Firefox 浏览器似乎做同样的事情。你看过他们的开发者工具吗？ IE(7 除外；6 将其作为插件提供；8 和 9 将其包含在内，只需按 F12)和 Opera 都有开发人员工具。检查它们，看看是什么导致了它们。

Opera 在 <p> 上设置了 1em 的顶部和底部边距。元素，我没有 IE 运行的平台，但我认为它也有。在您提供给我们的代码和示例中，您没有重置所有元素的边距，因此在您明确设置边距之前没有任何内容可以覆盖。

您可以做的另一件事是设置 line-height: 1;进一步收紧。

阿苏，你考虑过重组吗？根据您在此处发布的内容，您的内容可能更适合 definition list.

附带说明一下，您为什么要使用框架？它们不仅在 HTML5 中被弃用，而且有 several major reasons why他们很坏。如果您想要一个通用文件(例如标题和导航)，请查看服务器端包含。