Bagaimana untuk Membetulkan Keratan Cetakan A4 dalam Chrome Menggunakan CSS?

CSS untuk Menetapkan Saiz Kertas A4 untuk Pencetakan Tepat

Masalah:

Menetapkan saiz elemen HTML kepada dimensi A4 (21cm x 29.7cm) menghasilkan keratan halaman semasa mencetak dalam Chrome, walaupun dipaparkan dengan betul dalam penyemak imbas tetingkap.

Analisis:

Chrome secara khusus nampaknya menghadapi masalah dengan menetapkan 'awal' kepada lebar halaman dalam peraturan media cetak. Ini menyebabkan penskalaan kandungan kepada saiz yang lebih besar sedikit daripada dimensi A4 yang ditentukan, mengakibatkan keratan.

Penyelesaian:

Untuk menyelesaikan isu ini, elakkan daripada menggunakan 'awal ' untuk lebar halaman dalam peraturan media cetak. Sebaliknya, tetapkan secara eksplisit dimensi A4 kepada HTML, kandungan atau terus kepada elemen '.page'.

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

Dengan menetapkan dimensi tetap, kandungan kekal dalam sempadan A4, menghalang keratan. Ini menyelesaikan isu dalam Chrome sambil mengekalkan gaya CSS yang lain.

Nota: Pengubahsuaian ini menangani isu khusus dengan pengendalian Chrome 'awal' untuk lebar halaman. Walau bagaimanapun, adalah penting untuk menguji kefungsian cetakan merentas penyemak imbas yang berbeza untuk memastikan ketekalan dan ketepatan output cetakan.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Keratan Cetakan A4 dalam Chrome Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!