<Pre> Firefox 和 Chrome 之间的渲染差异

Question

我正在开发吉他和弦应用程序，问题是 Firefox 没有按预期呈现段落。

Firefox 渲染 p 标签，底部和顶部都有额外的 space。没有填充，也没有边距。 Firefox 表示元素之间只有“间隙”。我超级惊讶... 请注意，我突出显示了两个同级 p 元素，它们之间没有任何内容。这是我的结构：

    p {
        margin: 0; padding: 0;    
    }

<pre>
    <section style="inline-block">(Song metadata, you can see example in the screenshot)</section>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    ...
</pre>

预计（来自 Chrome）：

Firefox:

Firefox 屏幕截图，p 元素边界

我试过那些：

同时更改 pre 和 p 元素的 margin、padding
改变 display css 两个元素的属性
将 p 的样式设置为 line-height: 0.6em 可行，但这不是解决方案。

#EDIT 1：忘记添加样式表。顺便说一句，没有边距，也没有填充。我添加了图像以显示 p 元素的边界。

#EDIT 2：添加了我尝试过的内容

Answer 1

您的HTML无效。

p 元素 不允许 成为 pre 元素的子元素。

您看到的不一致是浏览器尝试以不同方式从您的错误中恢复的结果。

删除 p 个元素。改为在源代码中换行。

<Pre> Firefox 和 Chrome 之间的渲染差异

<Pre> rendering difference between Firefox and Chrome

html

css

svelte