2

我正在尝试为我的个人博客制作横格纸效果，但我遇到了一个障碍，让每一行都呈现在纸上的实际线条之一上。一切开始时都恰到好处，但随着行向下移动，舍入错误似乎越来越多。我将行高设置为 24px，并为 24px 的元素添加了填充，基本上只是试图确保任何增加高度的东西都是 24 的倍数，以便所有行都正确渲染。但我发现 chrome 并没有完全尊重 line height 属性。谁能解释下面的截图？

这基本上是我想要的效果，你可以看到它非常接近。 所需效果的插图

但是如果你看一下 height 属性，它是 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;
4

1 回答 1

1

这是因为您的浏览器覆盖了默认文本大小。这很可能是由于您的缩放级别或您可能已打开的任何可访问性选项。

我创建了这个（你可以在 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和画布自己渲染纸张（或简单地根据行高生成图像数据）或者，自己调整缩放级别详细在这里：

如何检测所有现代浏览器中的页面缩放级别？

于 2012-12-12T02:43:12.557 回答