在 Chrome 中打印精确的测量值答案

【问题标题】：Print exact measurements in Chrome在 Chrome 中打印精确的测量值
【发布时间】：2012-12-22 19:53:27
【问题描述】：

当以厘米或英寸为单位指定元素的测量值时，它会在 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 厘米。

【问题讨论】：

Specifying phyiscal size in CSS (e.g. 2 inches) when printing a web page 的可能重复项
@JukkaK.Korpela 完全独立的问题。该问题的问题是边距和填充。这与这里无关。
@JukkaK.Korpela ：您对另一个问题的回答不是这个人的问题。此外，您的打印机不是 15 厘米可能是由于打印机不准确。这是特定于浏览器的问题。我在使用 Firefox/IE 时没有问题，但我使用的是 Chrome。请在投票结束前正确阅读和理解。
我遇到了同样的问题。你有没有解决过这个问题？

标签： html css google-chrome printing

【解决方案1】：

我也发现了这个问题。

在玩了很多张浪费的纸之后，我发现 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 的打印效果要好得多，但运行速度要慢得多。

【讨论】：

另外，我发现这是 Chrome 中的一个错误。 code.google.com/p/chromium/issues/detail?id=273306

【解决方案2】：

100% 宽 div 的解决方案在当前 Chrome 版本上对我不起作用，但对于 A4 纸来说这是可行的：

html, body {
    width: 210mm;
}

【讨论】：

【解决方案3】：

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

例如A4页面，宽度为210mm

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

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

    body
    {
        width: 160mm;
    }
}

主体的左右和宽度加起来应为 210mm。

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

【讨论】：

【解决方案4】：

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

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

您可以继续阅读此主题以了解有关该问题的更多信息：

Firefox versus webkit measurements for media queries based on width

【讨论】：

doctype 只是因为它是一个 sn-p。通常，我也会使用外部样式表。不过对于这个例子并不重要。媒体查询部分也无关紧要，所以我删除了它并添加了一个文档类型。对它是否工作没有任何影响。
链接的 stackoverflow 问题讨论了针对不同页面大小使用不同样式，因为某些浏览器在页面大小中包含滚动条的宽度，而其他浏览器则不包含。这是一个完全独立的问题。
查看由 Jukka K. Korpela 提供的链接的可能副本。有点像我之前所说的那样，在呈现相同的规则时，浏览器似乎只是不一致。
不是重复的。该问题的问题与边距和填充有关。这里没有边距和填充，是的，我确实尝试过以防万一。