首頁 > web前端 > css教學 > 如何使用CSS在Chrome中準確模擬A4紙進行列印?

如何使用CSS在Chrome中準確模擬A4紙進行列印?

Patricia Arquette
發布: 2024-12-26 03:12:08
原創
732 人瀏覽過

How to Accurately Simulate A4 Paper for Printing in Chrome using CSS?

調整CSS 以模擬A4 紙張並啟用準確列印

要在Web 中建立模擬A4 紙張並在Chrome 中準確列印,需要使用某些CSS調整是必要的。雖然提供的元素尺寸 21 厘米 x 29.7 厘米可能看起來正確,但在打印或生成打印預覽時,頁面會被剪裁。

解決問題

經進一步調查,根本原因在於列印媒體規則中將「初始」分配給頁寬。如果沒有為其父元素定義特定的長度值,則在 Chrome 中使用「initial」作為寬度會導致縮放。這會導致頁面太長且內邊距大於預期的 2 公分。

解決方案

要修正此問題,請將「initial」替換為實際紙張列印媒體規則中的寬度 (210mm) 和高度 (297mm)。將此應用於“html”、“body”或直接應用於“.page”元素。

範例

以下修訂後的CSS 程式碼合併了建議解決方案:

相容性相容性

相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性相容性>此解決方案成功解決了Chrome中的列印問題(在各種作業系統平台上進行了測試),同時保留了其他瀏覽器中的功能。

以上是如何使用CSS在Chrome中準確模擬A4紙進行列印?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板