11

当以厘米或英寸为单位指定元素的测量值时，它会在 Firefox 和 Internet Explorer 中以完全相同的尺寸打印。另一方面，Chrome 使元素更大。

有没有办法让 Chrome 以指定的尺寸打印东西，还是我只能忍受？

例如

<!doctype html>
<html>
  <head>
    <style type="text/css">
        div.box {
          border: 1px solid black;
          width: 5cm;
        }
    </style>
  </head>
  <body>
    <div class="box">box</div>
  </body>
</html>

上面的代码在 Firefox 和 IE 中都打印了一个精确的 5 厘米（在我的打印机上），但从 Chrome 打印了大约 5.5 厘米。

4

4 回答 4

3

我也发现了这个问题。

在玩了很多张浪费的纸之后，我发现 Chrome 会尝试缩放 HTML。

例如，在下面的示例中添加一个全宽 div，它会正确调整框的大小，因为您要求 Chrome 将框设为页面的 100%，从而强制页面的比例为 1:1。

<!doctype html>
<html>
  <head>
    <style type="text/css">
        div.box {
          border: 1px solid black;
          width: 5cm;
        }
        div.forcer {
          width: 100%;
          height: 1px;
          border: 1px dotted green;
        }
    </style>
  </head>
  <body>
    <div class="box">box</div>
    <div class="forcer"></div>
  </body>
</html>

不幸的是，当我尝试这个时，它并没有解决高度问题，而且我也无法在不丢失正确缩放的情况下将框设为 0px。

顺便说一下，看看下面的内容，看看它是如何影响打印时的尺寸的。

<!doctype html>
<html>
  <head>
    <style type="text/css">
        div.box {
          border: 1px solid black;
          width: 5cm;
        }
        div.forcer {
          width: 200%;
          height: 1px;
          border: 1px dotted green;
        }
    </style>
  </head>
  <body>
    <div class="box">box</div>
    <div class="forcer"></div>
  </body>
</html>

简而言之：Chrome 的打印能力令人震惊！

Firefox 的打印效果要好得多，但运行速度要慢得多。

于 2014-08-11T14:19:04.833 回答
2

对于 Chrome，只需将打印边距设置为某个值，并将正文设置为纸张宽度，减去边距。

例如，对于 A4 页面，宽度为 210mm

因此，对于 1 英寸的边距（大约 2.5 厘米），您可以执行以下操作

@media print
{
    @page
    {
        margin-left: 25mm;
        margin-right: 25mm;
    }

    body
    {
        width: 160mm;
    }
}

身体的左右和宽度加起来应该是210mm。

对于字母，您将使用 1 英寸的边距和 6.5 英寸的宽度。

于 2015-01-25T01:59:01.190 回答
2

在当前的 Chrome 版本上，具有 100% 宽 div 的解决方案对我不起作用，但这适用于 A4 纸：

html, body {
    width: 210mm;
}
于 2014-10-29T18:30:00.223 回答
0

我确认我在使用您的 HTML 时遇到了同样的问题，即使是在尝试指定一些 CSS 规则以消除诸如填充和边距之类的明显嫌疑时也是如此。从我所做的研究来看，在呈现媒体查询时，您似乎只是在处理不一致的浏览器标准。如果可能的话，我会建议有条件地根据浏览器设置框的样式。

另一个方面似乎是，不指定 Doctype（无论如何这在开发中有点禁忌）可能会导致不一致。

您可以继续查看此主题以获取有关该问题的更多信息：

Firefox 与 webkit 基于宽度的媒体查询测量

于 2013-01-08T21:49:12.340 回答