Question

我正在设计一个页面，并将div的大小设置为100px（80px高度+ 20px padding-top）。

.header {
    height: 80px;
    padding-top:20px;
    ...
}

<body>
    <div class="header">
        Just another blog
    </div>
    ....
</body>

但是当在Chrome中渲染并截取屏幕截图时，我可以看到使用Paint，其大小实际上接近150px。

我有一个144dpi的屏幕，我不确定它是否与此有关。我希望这会被处理得很好，因为它是div的大小，而不是图像。

我还按照AsyncWorker的说明进行操作，其中提到了Chrome在高DPI屏幕上的一个错误。我尝试使用那里提到的标志启动Chrome以强制Chrome进入高DPI模式，这解决了问题。但其他网站似乎没有帖子提到的相同问题，所以我想知道我是否应该通过CSS做些什么来缓解这个问题？

您可以看到Chrome将div报告为100px高，但Paint将其测量为~150px

我在Windows 8.1上使用的是Chrome 49.0.2623.87 m。

谢谢！