CSS print sheet問題

這真是一個瘋狂的問題。CSS print sheet問題

我正在一個建立在CMS之上的網站上工作，所以標記是...不乾淨。我正在嘗試編寫一個打印樣式表，但它在瀏覽器中顯得非常不一致（我知道這很讓人震驚）。

鏈接：http://www.gastongov.com/departments/county-commission/contact-info

IE7和IE9看起來不錯。

IE8，文字較大，頁面右側的頁腳聲明被切斷。

Firefox 4是最糟糕的，因爲內容被放到第二頁，任何不適合該頁面的內容都會被黑掉，永遠不會再被看到。

請幫忙。我正在試圖讓這些瀏覽器以死樹模式工作。

來源

2011-06-01 zk812

你有一些捲曲問題，但是這裏有一些簡單的事情，至少可以幫助診斷和修復它們，即使它們沒有直接解決問題。

您的打印樣式表會在'page.css'之前加載，而其他一些CSS文件顯示來自您正在使用的CMS。所有這些都有一個有效的媒體類型'全部'。任何出現在這兩個地方的樣式都可以被覆蓋。我發現你的print.css文件中的!important已經瘋了，這表明你可能已經想到了這一點，或者被卡住了。

對於文本大小的問題，我會看看使用特定於打印的「重置」樣式表，在合理的點大小（10或12pt）的<body>上設置基本字體大小。點對於基於打印的樣式有很大的意義，並且不依賴於瀏覽器將像素大小重新映射到打印機上的點。

然後，對於所有基於文本的元素，您希望給予不同的大小，請在ems中指定一個乘法值。所以，你可能有：

body {font-size:10pt;} 

h1 {font-size:1.8em;} 
h2 {font-size:1.4em;} 
h3 {font-size:1.2em;} 
/* etc. */

至於火狐切東西掉去，我好像記得打印的表格內不同的處理方式 - 但我找不到在哪裏我得到的信息。這可能是相關的，因爲你的整個頁面被封裝在一個<form>元素中（感謝你的CMS，我猜）。作爲測試，嘗試將頁面保存爲靜態HTML，然後刪除該表單元素 - 請參閱打印時是否得到不同的結果。

祝你好運 - 這個打印的東西在最好的時候是討厭的 - 更糟的是，當你不控制HTML！

來源

2011-06-01 23:29:31 Beejamin

下面是關於在Firefox中切斷頁面的一些有趣的後續信息：https://bugzilla.mozilla.org/show_bug.cgi?id=258397 – Beejamin 2011-06-02 04:18:06

您做出了所有非常真實的假設。 print.css就是它的地方，因爲CMS而重要！我在網站的內部副本上嘗試了打印重置建議，問題變得更糟（IE8文本在12pt時變得很大，其他瀏覽器保持不變）。剝離表單標籤並不能幫助Firefox，並且您提供的鏈接表示Firefox 4中的問題已得到解決！是否有像Firebug這樣的工具可以檢查我的風格元素，因爲它們適用於打印頁面？ – zk812 2011-06-02 12:42:36

這主要是答案，但Firefox中斷問題源於CMS生成的其中一個容器DIV被設置爲display：inline-block。最後看起來沒問題。 – zk812 2011-06-02 17:24:46

CSS print sheet問題

回答

相關問題