11

要素の測定値がcmまたはインチで指定されている場合、FirefoxおよびInternetExplorerから正確にそのサイズで印刷されます。一方、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の両方で正確に5cm（私のプリンターで）を印刷しますが、Chromeからは約5.5cmで印刷します。

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

100％幅のdivを使用したソリューションは、現在のChromeバージョンでは機能しませんが、A4用紙では機能します。

html, body {
    width: 210mm;
}
于 2014-10-29T18:30:00.223 に答える
2

Chromeの場合は、印刷の余白を何かに設定し、本文を用紙の幅から余白を引いた値に設定します。

例：A4ページの場合、幅は210mmです

したがって、1インチのマージン（約2.5cm）の場合、次のことができます

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

    body
    {
        width: 160mm;
    }
}

本体の左右幅は合計で210mmになります。

レターの場合は、1インチの余白、および本体の幅6.5インチを使用します。

于 2015-01-25T01:59:01.190 に答える
0

パディングやマージンなどの明らかな疑わしいものを取り除くためにいくつかのCSSルールを指定しようとしても、HTMLを使用するときに同じ問題が発生することを確認しました。私が行った調査から、メディアクエリをレンダリングするときに一貫性のないブラウザ標準を処理しているように見えます。可能であれば、ブラウザに基づいてボックスを条件付きでスタイリングすることをお勧めします。

もう1つの側面は、Doctypeを指定しないと（とにかく開発では少しノーノーです）、不整合が発生する可能性があることです。

この問題についてさらに読むには、このトピックを参照してください。

幅に基づくメディアクエリのFirefoxとWebkitの測定

于 2013-01-08T21:49:12.340 に答える