Question

我有一个包含96px高元素的HTML页面。

我在CSS中设置属性，我在Photoshop中使用屏幕截图测量它们，我在检查器中检查它们。它们高出96px。

使用各种方法打印此页面时（浏览器中的Chrome浏览器＆＃34;保存为PDF＆＃34;功能，wkhtmltopdf，在线服务等），它们不会高出96px。

我开始相信将HTML转换为PDF的过程并不是一个完美的像素，这是可以理解的。

我该怎么做才能解决这个问题？

以下是源HTML文件和输出PDF文件。

＆＃13;

body {
  width: 8.5in;
  margin-top: 0.3in;
  margin-left: 0.2in;
}
.label {
  width: 2.625in;
  height: 1in;
  margin-right: .125in;
  float: left;
  text-align: center;
  outline: 1px solid black;
  overflow: hidden;
}
@page {
  margin: 0;
}

＆＃13;

<body>
  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

  <div class="label">

    <small>1-pack</small>
  </div>

</body>

＆＃13;

http://docdro.id/R4OLmTz

将HTML页面转换为PDF会产生极不完美的错误计算

0 个答案: