CSSを使用してChromeでA4印刷クリッピングを修正する方法?

正確に印刷するために A4 用紙サイズを設定する CSS

問題:

HTML 要素のサイズを A4 寸法 (21cm) に設定するx 29.7cm) では、ブラウザでは正しく表示されているにもかかわらず、Chrome で印刷するとページがクリッピングされてしまいます。 window.

分析:

Chrome では、特に印刷メディア ルールでページ幅に「initial」を割り当てる際に問題があるようです。これにより、定義された A4 寸法よりわずかに大きいサイズにコンテンツが拡大縮小され、クリッピングが発生します。

解決策:

この問題を解決するには、'initial' の使用を避けてください。 ' 印刷メディア ルールのページ幅。代わりに、A4 のサイズを HTML、本文、または直接「.page」要素に明示的に割り当てます。

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
}

固定サイズを設定すると、コンテンツは A4 の境界内に留まり、クリッピングが防止されます。これにより、残りの CSS スタイルを維持しながら Chrome の問題が解決されます。

注: この変更により、Chrome によるページ幅の「初期」の処理に関する特定の問題が解決されます。ただし、印刷出力の一貫性と正確性を確保するために、さまざまなブラウザーで印刷機能をテストすることが重要です。

以上がCSSを使用してChromeでA4印刷クリッピングを修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。