@media print在Chrome中無法正常工作

Question

已找到/閱讀/嘗試了很多答案，所以很抱歉，如果解決方案已發佈，但Chrome瀏覽器沒有正確顯示正確的打印樣式，但缺少許多元素（但不是全部）。

以下是設置方法。

1.設置

• 打印樣式設置在主css文件的使用@media print

• 有它加載CSS文件的鏈接沒有媒體屬性年底

• 我們宣稱對所有打印風格!important

• 打印樣式會覆蓋所需的屏幕樣式（即，畫面風格不是包裹在@media screen

• 打印仿真在Chrome瀏覽器開發工具顯示打印樣式完美

• 但是打印時的一些元素消失（和/或打印到PDF）

• 出現問題，如果使用打印HTML按鈕或「打印」從文件菜單

• 此問題不會在Firefox或Safari

發生種

---

2.故障處理

• 打印樣式被包裹在@media only print {}

• 所以嘗試 '只有' 這樣@media print {}但沒有什麼區別

• 如果刪除我錯誤地將'only'移動到'print'之後這@media print only {}

• 那麼一些缺失的打印元素的顯示，但其他人消失

• 正如其他地方所指出，試過這個黑客在打印樣式開始，但沒有運氣

  * { -webkit-transition: none !important; transition: none !important; }

---

任何幫助或建議將受到歡迎。

乾杯

本

Answer 1

這個問題可以通過在你的主要內容容器類，presenter-notes__main-content CSS聲明display: inline-block引起的。

內嵌塊本質上是內部的塊元素和外部的內聯元素。內聯元素在打印時是不可破的，除非它是行換行的，在這種情況下分頁符只能在行之間發生。這可以防止單獨的文本行被分頁符水平分割，這將使打印的文檔非常難以閱讀。內聯塊永遠不會換行（這是因爲它的內容包裝而不是元素本身），因此始終是不可破解的。

因此，如果元素太大而無法放在單個頁面上，但無法在多個頁面上拆分，會發生什麼情況？瘋狂的東西，就是這樣！當然，有些瀏覽器可能會優雅地降級，並且會限制溢出，但其他瀏覽器可能會感到困惑並完全刪除該元素。計算機在處理矛盾時並不擅長。