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

我有一个有序的列表，它使用大乔治亚字体作为编号，使用较小的Arial字体作为文本（如建议的那样）。我在li中使用p标记，因此我可以设置字体大小，同时设置相关的行高（确保如果li超过一行，则有正常的行距）。这几乎没什么问题，但是在firefox中，项目符号之间的间距比任何其他浏览器都要小得多，所有其他浏览器似乎都在p标记上方添加了一个边距，尽管明确地将边距设置为0。当我在Chrome中使用开发者工具查看它时，它似乎在前面添加了-webkit边距：1em； -webkit后的页边距：1em；到未被覆盖的p标记。这可能不是原因，因为它也发生在非webkit浏览器中，除了FF和我读到的所有其他内容之外，都说这些都是通过设置边距来覆盖的（边距在下面的代码中设置，并在css文件的顶部重置了所有元素的css边距）。如果有人能指出为什么我在所有非FF浏览器上获得了更多的空间，我将不胜感激，因为我一直在努力解决这个问题，只是不明白为什么会发生这种情况！仅供参考，我已尝试明确设置每个元素的线条高度，但效果完全相同。您可以看到下面的代码

非常感谢你的帮助和任何人能给予的建议

戴夫

ol{
颜色：#ec008c；
保证金：0；
填充：0.1.6em；
列表样式位置：外部；
字体系列：佐治亚，衬线；
字体大小：16px；
字体大小：粗体；
}
欧利{
保证金：0；
填充：0；
}
欧力普{
字体系列：arial，无衬线；
字体大小：正常；
字体大小：10px；
颜色：#000000；
利润率：0.4px 0；
填充：0；
显示：块；
}
列表
条目1-条目详细信息

条目2-条目详细信息

条目3-条目详细信息更长且跨越多行

条目4-条目详细信息

条目5-条目详细信息

我想它可能与您在

li

元素中使用的较大字体的行高有关。如果我在Chrome中的

li

-样式中添加

行高：12px

，间距看起来与FF中的相同。

您提到的非webkit、非Firefox浏览器似乎也做了同样的事情。你看过他们的开发工具吗？IE和Opera都有开发工具（除了7；6作为一个插件；8和9包括在内，只需点击F12）。检查一下，看看是什么原因造成的

Opera在

元素上放置了1em的上下边距，我没有IE运行的平台，但我认为它也有。在您给我们的代码和示例中，您没有重置所有元素的边距，因此在显式设置边距之前，没有任何内容可以覆盖

您可以做的另一件事是设置

行高度：1进一步收紧

麻生太郎，你考虑过重组一点吗？根据您在此处发布的内容，您的内容可能更适合

另一方面，为什么要使用框架？它们不仅在HTML5中被弃用，而且还有一些是不好的。如果您想为通用内容（如标题和导航）创建一个单独的文件，那么请查看服务器端包含的内容。
@deshg；首先我想说的是使用。现在的问题是，在chrome中li之间有一个额外的间距

原因

1） 每个用户代理都有自己的默认属性。所以，他们的表现不同

2） 可能是一个结构也需要更多的检查

解决方案

a。使用resetsheet

b。最好给出span而不是p

c。正如斯瓦内尔滕所说，在你的
li中给出
行高
，更多信息请查看链接


使用像素作为填充单位有什么问题？没有什么问题，但如果不使用特定于浏览器的规则（除非必要，否则我希望避免使用这些规则），那么它就没有任何帮助。感谢DaveThanks的评论，我正在使用*{margin:0；padding:0；}重置所有元素的边距/填充，但我忘记将其放在链接测试文档中（我现在已经添加了它）。我可以看到更详细的cssreset显然重置了所有可能的默认值，但在这种情况下，*{margin:0；padding:0；}就足够了？非常感谢您的帮助。我之前在IE中通过开发者工具进行了检查，列出的样式与我指定的样式相匹配，并且“应该”起作用（无论如何，我觉得很好！）我实际上没有使用框架，只是URL缩短器添加了框架，我完全同意您从不使用框架！随着李线高设置歌剧现在匹配FF，IE和Chrome有稍宽的间距。我怀疑这是因为文本呈现，但在查看开发工具时，chrome/IE中的span/p上似乎仍然有一个稍大的边距（但列出的样式现在是正确的），我还想说我正在使用*{margin:0；padding:0；}要重置所有元素的边距/填充，但我忘了将其放在链接测试文档中（我现在添加了它）：）我想知道您是否认为剩余的差异只是由于浏览器如何呈现文本，或者是否仍然存在问题？我还将看一看定义列表，我以前从未听说过它们，但它们看起来非常有趣。非常感谢你的支持help@deshg-据我所知，你的号码似乎是罪魁祸首。与MacOS上的Chrome和Opera相比，数字的空间似乎更大一些，因为它们比只有一行文本时的文本行和边距稍大。尝试添加边距或调整边距
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>