報價單頁面列印跑版：print 媒體查詢與分頁排查流程

作者：平白設計編輯部｜發布與最後查證：2026-10-03｜適用：台灣（中華民國）｜技術資訊，不保證搜尋排名

客戶把網頁上的報價單或活動說明按下列印，結果導覽列、側欄全印出來，表格被切在兩頁中間。本文整理 print 媒體查詢、隱藏元素與分頁控制的排查流程，寫給維護企業官網的人照著做。不保證任何排名結果，只聚焦在讓列印畫面乾淨可讀的具體步驟。

文章重點

• 用開發者工具切換列印媒體快速定位跑版元素
• 以 media print 規則隱藏導覽列與浮動按鈕
• 設定 break-inside avoid 防止表格與圖片被切斷
• 在多瀏覽器實際列印抽樣確認排版一致

先認出列印跑版的常見症狀

客戶回報列印問題時，通常會附上截圖或 PDF。最常見的狀況是：頂部導覽列佔了半頁、右下角聊天按鈕蓋住文字、背景色塊把墨水吃光。這些元素在螢幕上合理，但放到紙本就會干擾閱讀。

第二類症狀是分頁失控。報價單的表格列被硬生生切成上下兩頁，或者一張產品圖上半頁在左邊、下半頁跑到右邊。這類問題會讓文件失去專業感，客戶拿到手還要自己拼湊內容。

第三類是字體與連結處理。深色背景配白字在螢幕好看，印出來卻是一團灰。另外，超連結在紙上無法點擊，若沒把網址印出來，讀者就找不到來源。這些細節都要在排查流程裡一次解決。

用開發者工具模擬列印媒體

打開 Chrome 或 Firefox 的開發者工具，找到媒體類型模擬功能。Chrome 按 Ctrl+Shift+P 輸入「Rendering」，把 Emulate CSS media type 改成 print。這樣不用真的按列印就能預覽效果。

切換後你會發現原本隱藏的元素可能跑出來，或者某些區塊消失。這時候檢查哪些 CSS 規則被套用、哪些被覆蓋。這個步驟能幫你快速縮小範圍，不用反覆按列印浪費紙張跟時間。

模擬環境跟真實列印仍有差距，特別是分頁行為。瀏覽器渲染引擎對 break-inside 的支援程度不同，所以模擬只是第一步。確認大致方向後，還是要進到實體列印或另存 PDF 做最終比對。

@media print {
  .site-nav, .footer, .chat-btn { display: none; }
  body { background: #fff; color: #000; }
  tr, figure { break-inside: avoid; }
  a[href]::after { content: \" (\" attr(href) \")\"; }\n}"}

撰寫 media print 隱藏多餘元素

在樣式表裡加一段 @media print 區塊，專門處理列印時的顯示規則。先把不需要印出來的元素列清單：導覽列、頁尾版權區、側欄廣告、Cookie 同意橫幅、回到頂部按鈕、社群分享列。

針對這些元素直接寫 display: none。建議用 class 選擇器而非 id，因為同一個元件可能出現在多個版面。例如 .site-nav, .chat-widget, .cookie-banner { display: none; } 這樣一行就能處理。

隱藏元素後記得檢查版面是否塌陷。有些區塊被移除後，主內容區可能沒有自動填滿寬度。這時要在 print 區塊裡把容器設成 width: 100% 並移除不必要的 margin，確保內容撐滿紙張可用範圍。

控制分頁避免表格圖片被切斷

表格和圖片是最容易被分頁切斷的元素。CSS 提供 break-inside: avoid 屬性，套用在 tr、figure 或卡片容器上，告訴瀏覽器盡量不要把這個區塊拆到兩頁。這是解決切斷問題最直接的做法。

但 avoid 不是萬能。如果單一表格列本身就超過一頁高度，瀏覽器仍會強制切斷。這時要考慮把大表格拆成多個小表格，或在關鍵段落前加上 break-before: page 手動指定換頁位置。

圖片處理要注意 max-width: 100% 與 height: auto，避免圖片超出紙張邊界。若圖片帶有重要資訊，可在下方補一段文字說明，就算圖片被縮小或移到下一頁，讀者仍能理解內容。

跨瀏覽器抽樣與檢查清單

完成樣式調整後，必須在 Chrome、Firefox、Safari 與 Edge 分別執行列印預覽或另存 PDF。每家瀏覽器對分頁屬性的解讀略有差異，某個瀏覽器正常的排版換到另一個可能就跑掉。這步不能省。

抽樣時除了看報價單頁面，也順手檢查其他常用頁面是否正常。就像 改版後 favicon 路徑怎麼抽樣 那篇提到的系統性檢查邏輯，建立固定清單能避免漏項。

最後把檢查結果記錄下來。你可以參考 改版後 og:locale 怎麼抽樣 的紀錄方式，把每個頁面的列印狀態標記清楚，方便日後維護時快速核對。

常見問題

為什麼用了 break-inside: avoid 表格還是被切斷？

當單一表格列高度超過一頁可用空間時，瀏覽器仍會強制分頁。建議把過長的列拆成多列，或在表格前手動插入分頁符號來控制位置。

列印時需要把超連結的網址印出來嗎？

紙本無法點擊連結，建議在 media print 裡用 CSS content 屬性把 href 值加在連結文字後方，讓讀者知道目標網址。

背景圖片在列印時消失了怎麼辦？

瀏覽器預設不列印背景圖以節省墨水。若該圖片是必要資訊，請改用 img 標籤嵌入，或在列印設定裡手動開啟背景圖形選項。

media print 的樣式會影響螢幕顯示嗎？

不會。只要把規則包在 @media print 區塊內，這些樣式只在列印或另存 PDF 時生效，不會影響一般瀏覽畫面。

重點摘要

1. 用開發者工具模擬列印媒體快速抓出跑版元素
2. 集中撰寫 media print 規則隱藏非必要介面
3. 對表格與圖片套用分頁控制避免內容被切斷
4. 跨瀏覽器實際列印抽樣確認排版結果一致

延伸閱讀

• 改版後 favicon 路徑怎麼抽樣
• 改版後 og:locale 怎麼抽樣
• 改版後 web manifest 怎麼抽樣