Question

我有一个简单的html页面（下面的代码）。页面和元素的宽度和高度分别为1587.4px和2245.04px。这些是在@page和元素上设置的。我期待一个完全红色的页面，没有边距/边框）。但是，我在PDF的底部获得了一个白色边距/行（使用谷歌浏览器的另存为PDF）。我怀疑它是缩放或盒子模型的问题。不确定。

我已将背景颜色添加到正文和父元素中，以查看它是否正在渗透并且它不是。该行是白色的，因此由于某种原因由Chrome添加。

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <style>
      @page {
        size: 1587.4px 2245.04px;
        margin: 0;
      }

      body {
        padding: 0;
        background-color: green;
        -webkit-font-smoothing: antialiased;
        margin: 0;
        position: absolute;
      }

      .page {
        margin: 0;
            top: 0;
        left: 0;
        position: relative;
        background-color: blue;
      }

      .element {
        margin: 0;
        top: 0;
        left: 0;
        position: absolute;
      }
    </style>
</head>
<body>
    <div class='page' style="width: 1587.4px; height: 2245.04px;">
        <div class='element image' style='top: 0; left: 0; width: 1587.4px; height: 2245.04px;'>
            <div style="background-color: red;width: 1587.4px; height: 2245.04px;"></div>
        </div>
    </div>
</body>
</html>

编辑：这似乎只是这些方面的问题。我尝试了500 x 500和1936 x 1936并且没有出现白线。即使将上述示例中使用的尺寸加倍，也能正常工作。

如何删除Chrome中打印/ PDF底部的边距？

0 个答案: