更改用於打印的CSS頁邊距

我們有一個帶有page-wrapper id的元素。我已經測試，改變這一內容的利潤率呢，其實，除去實際頁面邊距：更改用於打印的CSS頁邊距

@media (min-width: 768px) { 
    #page-wrapper { 
     position: inherit; 
     margin: 0 0 0 220px; 
    } 
}

我的目標是保持利潤率爲標準頁，但打印時將其刪除，所以我嘗試這樣：

@media print 
{ 
    #page-wrapper 
    { 
     margin: 0px !important; 
     /*display: none !important;*/ 
    } 
}

的display:none評論存在只是爲了證明確實如此，事實上，隱藏打印的元素，它在那裏我測試的一部分。然而，保證金不會像它應該改變。

我對我可能做錯的想法不甚瞭解，所以我希望有人有一個想法。我們在頁面上沒有其他@media print樣式，但確實有其他@media min-width styles，但據我所知#page-wrapper應覆蓋它們全部用於打印。

任何想法？

編輯：設置background-color:red;似乎不工作，只有隱藏元素從視圖display: none作品。

編輯2：我不設置@media print在樣式表中絕對最後，而不是它應該的問題，因爲它是唯一的打印樣式，並使用!important，但還是值得一提的一件事覈對。

編輯3：檢查元素時，唯一應用的邊距樣式是第一個代碼段中顯示的樣式。在檢查元素時，@media print樣式完全不顯示。

來源

2015-11-03 VSO

聽起來像你可能有一個保證金應用比'＃page-wrapper'計算的'（0,1,0,0）'具有更大的特異性，它也具有'！important;'。請參閱[this]（http://vanseodesign.com/css/css-specificity-inheritance-cascaade/）以獲取更多參考。嘗試打開開發工具（大多數瀏覽器中的''）並選擇元素以查看樣式細分。尋找可能更具體的包含'！important;'標籤的應用樣式。如果您需要幫助計算特異性，請嘗試[this]（http://specificity.keegan.st/）資源。 – War10ck

謝謝，我只是通過了，我沒有看到任何設置頁面包裝器上重要的邊距寬度。這是一個預製的樣式表，所以有大約200個標記爲「！important」的東西 - 在我仔細檢查所有建議之後會更新，ty。 – VSO

您是否在您的主要CSS鏈接上放置了媒體屬性？例如，如果你要用'media =「screen」包含你的主CSS文件，那麼打印樣式可能不起作用。 – MikeZ

當我需要解決類似問題時，我首先創建了頁面部分的PDF，然後如果需要我可以打印它，或者我可以通過電子郵件將其打印出來。要調整PDF的頁邊距，您可以使用@page選擇器。所以，我的嵌入式CSS將是：

@page{margin:120px 50px 80px 50px;}

它可能或因爲我還沒有從頁面試圖直接打印可能無法正常工作，但可能提供相同的最終目標的另一個途徑。

來源

2015-11-03 20:03:46 Michael

更改用於打印的CSS頁邊距

回答

相關問題