我正在尝试为我的个人博客制作横格纸效果，但我遇到了一个障碍，让每一行都呈现在纸上的实际线条之一上。一切都开始得恰到好处，但舍入误差似乎随着行在页面上的向下累积而累积。我已将行高设置为 24px，并向 24px 的元素添加了填充，基本上只是试图确保添加高度的任何内容都是 24 的倍数，以便所有行都能正确呈现。但我发现 chrome 并没有完全遵守行高属性。谁能解释下面的屏幕截图？
这基本上是我想要的效果，正如您所见，它非常接近。
但是如果您看一下高度属性，它是 70.909...，而实际上它应该是 72 (24 * 3)。所以基本上我的问题是，为什么 <p> 的高度是[6char] 不是行高的倍数？
这是 <p> 的 CSS 计算样式文本中的元素:
font-size:16.363px;
height:70.909088;
line-height: 24px;
padding-top: 24px;
margin:0px;
padding-bottom:0px;
最佳答案
这是因为您的浏览器覆盖了默认文本大小。这很可能是由于您的缩放级别或您可能已打开的任何辅助功能选项所致。
我创建了这个(你可以 view it on jsFiddle ):
<html>
<head>
<style type="text/css">
p {
line-height: 24px;
}
</style>
</head>
<body>
<p>
three<br>
lines<br>
of text<br>
</p>
</body>
</html>
Chrome 中的计算样式是:
display: block;
height: 72px;
line-height: 24px;
width: 1584px;
按 crtl+- 并重新加载页面会产生以下计算样式:
display: block;
height: 70px;
line-height: 23.981483459472656px;
width: 1761.8148193359375px;
我能想到的制作缩放级别不可知内衬纸主题的唯一方法是使用 Javascript 和 canvas 自己渲染纸(或根据行高简单地 generating the image data)或者，自己调整缩放级别，详见此处:
关于rendering - 为什么 <p> 或 <h> 的高度不是 line-height CSS 属性的倍数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13831801/