如何使用 CSS 控制瀏覽器列印設定（邊距、頁首、頁尾）？
- Linda Hamilton原創
- 2024-12-30 06:21:10329瀏覽
更改瀏覽器列印設定（邊距、頁首、頁尾）
已經進行了許多嘗試來解決修改瀏覽器列印設定的主題，但最終的清晰度仍然難以捉摸。本文提供了基於最新 CSS 標準的全面解釋和程式碼範例。
使用 @page 指令進行自訂
CSS 提供了 @page 指令，允許修改列印的頁面特定格式媒體。透過使用此指令，開發人員可以指定印表機邊距、頁面方向和其他設定。
設定印表機邊距
要設定印表機邊距，請使用 @page 指令中的 margin 屬性。此屬性採用以毫米為單位的值，並影響印表機選項面板中的邊距設定。
注意： @page 屬性的瀏覽器行為可能會有所不同。例如，Safari 不支援邊距設置，而其他主流瀏覽器則支援。
要使用@page 刪除頁首和頁腳，請如下設定邊距：
@page {
margin: 0mm;
}
此技術可能不支援如果您的列印內容跨越多個頁面，因為瀏覽器特定的邊距被停用，那麼它會很有效。
瀏覽器特定行為
不同的瀏覽器在處理 @page 指令時會表現出不同的行為。細分如下：
- Firefox 3.6 及更低版本： @頁邊距被忽略。
- IE 7 及更低版本： @頁邊距被忽略。
- Safari 5.1.7: 不支援@頁邊距。
- Chrome 4.1: @頁邊距被忽略。
- IE 8: @頁邊距受到尊重，但瀏覽器頁首和頁腳不受尊重隱藏。
- Opera 10： @頁邊距不受尊重，但如果背景不透明，瀏覽器頁眉和頁腳將被隱藏。
- Chrome 21以上： @頁邊距受到尊重，如果邊距與頁邊距重疊，則瀏覽器頁眉和頁腳將被隱藏
範例程式碼
以下HTML 和CSS 程式碼示範如何使用@page 指令自訂列印設定。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto;
margin: 0mm;
}
html
{
background-color: #FFFFFF;
margin: 0px;
}
body
{
border: solid 1px blue ;
margin: 10mm 15mm 10mm 15mm;
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>
注意： 此程式碼在 Chrome 中隱藏瀏覽器頁眉和頁腳，但在其他瀏覽器中則不然瀏覽器。
限制與注意事項
所有瀏覽器可能無法一致支援動態變更瀏覽器列印設定。某些瀏覽器可能會覆蓋自訂設置，或者結果可能會有所不同，具體取決於所使用的特定印表機。
以上是如何使用 CSS 控制瀏覽器列印設定（邊距、頁首、頁尾）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn