等宽字体导致行高失调

Question

等宽字体导致行高失调

4

假设我有以下内容：

<p>This is a paragraph containing some <code>code</code>.</p>

它的样式如下：

p {
    font: 16px/24px sans-serif;
}
code {
    font: 16px/24px monospace, sans-serif;
}

为什么code元素会使我的行高失控？这里是一个jsFiddle示例，说明了这个问题：http://jsfiddle.net/sl1dr/chgyb/ 编辑：经过进一步调查，我发现我链接到的fiddle在 Mac 上运行良好，但在 Windows 上不行。因为我正在处理的网站在 Mac 和 Windows 上都存在此问题，所以这变得更加有趣。

- joshnh

2个回答

0

我在这里找到了一个可行的解决方案，即再次设置font-size并将font-family设置为monospace, monospace。

- MatTheCat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- noob · Accepted Answer

这不是由于 line-height 的变化，而是因为大多数不同的 font-family 具有不同的字体周围间距。但是 font-margin 不是可以使用 CSS 更改的内容。所以你是正确的，你需要更改 line-height：http://jsfiddle.net/chgyb/2/。