Css 等距字体将行高抛出

假设我有以下几点：

<p>This is a paragraph containing some <code>code</code>.</p> 使用以下样式：

p { font: 16px/24px sans-serif; } code { font: 16px/24px monospace, sans-serif; } p{ 字体：16px/24px无衬线； } 代码{ 字体：16px/24px单空格，无衬线； } 为什么代码元素会超出我的行高？下面是一个JSFIDLE，它说明了这个问题：

---

编辑：经过进一步的调查，我发现我链接的小提琴在Mac电脑上运行良好，但在Windows上却不行。这一点越来越吸引人，因为我正在工作的网站在Mac和Windows上都存在这个问题。

这不是一个

行高的变化，这是因为大多数不同的
字体系列
在字体周围有不同的边距。但是
font-margin
不是css可以改变的东西。因此，您是对的，您需要更改
行高
：
我找到了一个有效的解决方案，即再次设置
字体大小
，并将
字体系列
设置为
单空格，单空格
，但这会让人更加困惑。如果我增加（减少不起作用）字体大小（代码元素的），则渲染的行高将减少：
行高
没有减少，您只需不更改
行高
。
行高
是行的高度！！！这把我弄糊涂了，你能再解释一下吗？