用於打印的跨瀏覽器CSS

我正在實施的一個web應用程序必須在A4紙上打印一些頁面。這些頁面只是爲了被打印而準備的（它們與'app'中顯示的不一樣），所以我不需要在各種媒體類型中包含相同的CSS不同格式（它們與其他頁面不同，單色，等等）：我只需要爲打印件寫一個CSS樣式。

我使用的基本CSS是Bootstrap V3，我從中刪除了媒體類型「打印」的所有規則。我使用第二個CSS來覆蓋一些Bootstrap規則並且沒有其他文件。

問題是這樣的一個：

請問我能否讓兩種瀏覽器以同樣的方式打印文件？

大多數調試器允許您調試特定的媒體類型。因此，對於打印您可以設置調試器使用CSS media = print輕鬆地操縱樣式根據需要

我已經有過類似的問題，與一些dt表和我通過添加CSS重置了一層額外的我print解決它樣式表。

無論如何，它聽起來像你只需要在你的打印CSS中明確定義字體和字體大小。

@media print { 
    html, body { 
     font: Arial; 
     font-size: 12px; 
    } 
}

對我來說，如果沒有你的實體，我很難提出其他建議，但這是我開始的地方。

enter image description here

2014-04-01 22:37:04 megawac

我已經在'media = print'模式下使用了開發仿真。這些問題也出現在頁邊空白處：Chrome使用比Safari更大的邊距。較大的邊距+較大的字體會破壞我在屏幕上看到的佈局。 –

例如，在Safari上的一張紙上打印同一頁，在Chrome上打印兩張（第二個爲空）。 –

如果您使用Chrome和Safari瀏覽器進行測試，你必須檢查是否正在使用相同的打印引擎預覽由於Chrome已經內置的打印ENGINGE，並避免使用CTRL + SHIFT + P快捷鍵。 Chrome內置的打印引擎出現很多錯誤。

2014-04-01 23:00:31 mrserge

感謝您的建議，但我寧願嘗試找到一種解決方案，讓用戶選擇他們喜歡的引擎（有些用戶甚至無法同時按三個鍵）。 –

在不同的打印引擎上將不會有相同的輸出。這裏有一些原因： 1）默認頁邊距不同 2）默認頁眉和頁腳是不同的 3）默認紙張尺寸不同等這就是爲什麼你應該至少嘗試檢查從同一臺打印機輸出正確不同的瀏覽器，而不是不同瀏覽器上的不同打印機。 – mrserge

我使用相同的打印機，我試圖設置所有的邊距＆co。我能想到。 –

使用點數的字體大小進行打印可能會產生更均勻的結果。像素用於屏幕。點是測量的打印單位... font-size：12pt;

2014-04-01 23:11:17 jswitchback

回答