@media的侷限性精確輸出的打印樣式

我們正在嘗試使用@media print.css樣式表來啓用網頁以打印一組Avery標籤（6張放在一張紙上 - 4「x 3」）。一般來說，印刷媒體樣式表似乎是讓頁面看起來像屏幕上的列表的完美解決方案，但是當您列印列表時，您會得到Avery徽章的印跡！@media的侷限性精確輸出的打印樣式

但是，挑戰在於細節。除了每個瀏覽器似乎對打印樣式有獨特的解釋以及某些規則都不起作用這一事實之外。我已經看到並研究了使用print.css的大部分基本信息。使用黑色覆蓋字體顏色並設置要打印或不能打印的細節相當容易，但此分配需要的是精確的元素位置和樣式。

該網站已經具有Bootstrap和其他鏈接的.css頁面，雖然我已經取消了它們的鏈接來測試頁面，並試圖隔離出可能干擾打印樣式的任何內容。

看來，浮動不工作在IE中。我們的列表頁面內容需要在Chrome瀏覽器中浮動顯示，但字體樣式和其他div並不按照預期顯示。 Firefox沒有顯示任何所需的打印內容，但指出頁面編號似乎與Chrome一致，即有56頁標籤，（對不起，如果你看不到它們？）我希望這個文檔可以作爲存儲庫對於提示技巧和限制 media @print。

來源

2014-03-24 Jonny Shaw

到目前爲止，我所能找到的是設置打印樣式表的「基礎」。東西我會考慮更常識的設計，而不是技術限制。例如，將導航細節設置爲顯示：無;和所有文字顏色：＃000。我發現我自己的浮動不能很好地工作（特別是在FF中），而像Margin和字體訪問這樣的東西是「最好的」。我甚至在徽章未按預期工作之前或之前嘗試設置分頁符的位置。似乎@print僅用於外觀？ –

您是否正在使用重設來移除導致差異的所有瀏覽器默認樣式？這是一個非常標準的：http://meyerweb.com/eric/tools/css/reset/ – davidcondrey

[如何在所有瀏覽器的頁面上打印跨瀏覽器兼容性？]（http://stackoverflow.com/questions/3697444/how-to-get-cross-browser-compatibility-in-print-from-all-browsers） – davidcondrey

我遇到了同樣的問題。我需要以確切的尺寸打印到特定的Avery標籤上，儘管我可以使其與Chrome一起工作（儘管它忽略了某些打印CSS樣式） - 它在Firefox中不起作用。 Safari也似乎在它自己的世界裏。

我認爲我要解決這個問題的唯一方法是生成用戶必須下載並打印（或從瀏覽器打印PDF文件）的PDF文件。

吮吸，但還沒有找到任何「CSS打印瀏覽器重置」的解決方案。

來源

2014-09-22 00:07:48 TylerNZ

謝謝泰勒，至少我不是唯一一個被這個困惑的人。上面的鏈接有一些有用的指導，但可能不是很徹底。我想這將取決於我們記錄哪些瀏覽器在什麼時間做什麼的細節差異。另一個「我沒有時間做的工作，但真的希望我做了」，是的，如果我能找到它或做它，我會分享它。我也不喜歡保存爲.pdf並打印該文件，如果這一步驟可以避免的話。 –

@media的侷限性精確輸出的打印樣式

回答

相關問題