2015-11-03 82 views
0

我們有一個帶有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樣式完全不顯示。

+1

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

+0

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

+0

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

回答

0

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

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

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