Question

我正试图为我的个人博客制作衬里纸效果，但是我遇到了一个障碍，让每一行都在纸上的一条实际线上渲染。一切都从恰到好处开始，但是当线条沿着页面向下时，舍入错误似乎会累积。我已经将行高设置为24px，并为24px的元素添加了填充，基本上只是为了确保添加高度的任何东西都是24的倍数，以便正确渲染所有行。但我发现铬并不完全符合线高属性。任何人都可以解释下面的截图吗？

这基本上是我想要的效果，因为你可以看到它非常接近。 Illustration of Desired Effect

但是如果你看一下身高属性，那就是70.909 ......，实际上应该是72（24 * 3）。所以基本上我的问题是，为什么<p> [6char]的高度不是行高的倍数？

The height is not a multiple of line-height

以下是文本中<p>元素的CSS计算样式：

font-size:16.363px;
height:70.909088;
line-height: 24px;
padding-top: 24px;
margin:0px;
padding-bottom:0px;

Answer 1

这是因为您的浏览器覆盖了默认文本大小。这很可能是由于您的缩放级别或您可能已启用的任何辅助功能选项所致。

我创建了这个（你可以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）自己渲染纸张或者，自己调整缩放级别，如下所示：

How to detect page zoom level in all modern browsers?

为什么<p>或<h>的高度不是行高CSS属性的倍数？</h> </p>

1 个答案: