Question

如果为元素指定了厘米或英寸的测量值，则会从Firefox和Internet Explorer以相同大小打印。另一方面，Chrome会使元素更大。

无论如何都要让Chrome打印出精确到指定尺寸的东西，还是我必须忍受的东西？

E.g。

<!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厘米。

Answer 1

在目前的Chrome版本中，100％宽的div的解决方案对我来说不起作用，但对于A4纸来说这是有效的：

html, body {
    width: 210mm;
}

Answer 2

我也发现了这个问题。

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

Answer 3

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

E.g。对于A4页面，宽度为210mm

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

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

    body
    {
        width: 160mm;
    }
}

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

对于字母，您使用1英寸边距，身体宽度为6.5英寸。

Answer 4

我确认在使用HTML时遇到了同样的问题，即使在尝试指定一些CSS规则来摆脱明显的嫌疑人（如填充和边距）时也是如此。从我所做的研究来看，在渲染媒体查询时，您只是处理不一致的浏览器标准。如果可能的话，我建议根据浏览器对盒子进行有条件的造型。

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

您可以继续阅读本主题以获取有关该问题的更多信息：

Firefox versus webkit measurements for media queries based on width

在Chrome中打印精确测量值

4 个答案: