在Chrome中打印精确的测量值

x8diyxa7 于 2023-09-28 发布在 Go

关注(0)|答案(4)|浏览(98)

当为某个元素指定了cm或inches的测量值时，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厘米。

google-chrome

来源：https://stackoverflow.com/questions/14223843/print-exact-measurements-in-chrome

4条答案

按热度按时间

qlckcl4x1#

我也发现了这个问题。
在浪费了很多纸张之后，我发现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>

不幸的是，当我尝试这样做时，它并没有解决高度问题，而且我也无法在不失去正确缩放的情况下使框为0 px。
顺便说一句，看看下面的内容，以显示它如何影响打印时的大小。

<!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在打印方面要好得多，但运行速度要慢得多。

赞(0）回复(0）举报 2023-09-28

1cosmwyk2#

对于Chrome，只需将打印边距设置为某个值，并将正文设置为纸张的宽度，减去边距。
例如，A4纸的宽度为210mm
因此，对于1英寸边距（约2.5厘米），您可以执行以下操作

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

    body
    {
        width: 160mm;
    }
}

车身的左、右、宽加起来应该是210mm。
对于字母，您将使用1英寸的边距，以及6.5英寸的宽度。

赞(0）回复(0）举报 2023-09-28

ruarlubt3#

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

html, body {
    width: 210mm;
}

同时确保设置正确的边距。

赞(0）回复(0）举报 2023-09-28

qmelpv7a4#

我确认在使用HTML时也遇到了同样的问题，即使是在试图指定一些CSS规则来消除像padding和margins这样明显的嫌疑犯时。从我所做的研究来看，在呈现媒体查询时，看起来你只是在处理不一致的浏览器标准。如果可能的话，我建议根据浏览器有条件地设置框的样式。
另一个方面似乎是不指定Doctype（这在开发中是一个禁忌）可能会导致不一致。
您可以继续查看此主题，以了解有关此问题的更多阅读：
Firefox versus webkit measurements for media queries based on width

赞(0）回复(0）举报 2023-09-28

我来回答

在Chrome中打印精确的测量值

4条答案

相关问题

热门标签

最新问答