在鉻和Safari瀏覽器上打印寬度不同

我在模態視圖上實現報表查看器。這些都是一些打印樣式：在鉻和Safari瀏覽器上打印寬度不同

@page{ 
    margin: 5mm; 
} 

body{ 
    visibility: hidden; 
} 
.modal-report{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 
#report-view-container-id, #report-view-container-id *{ 
    visibility: visible; 
} 
#report-view-container-id{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top:0; 
    left: 0; 
} 

.report-view-container-letter 
{ 
    max-width: 23.59cm; 
    max-height: 27.94cm; 
    min-width: 23.59cm; 
    min-height: 27.94cm; 
    padding-right: 15px; 
    padding-left: 15px; 
}

在Firefox上，當我嘗試打印的偉大工程的寬度是完美的，但對谷歌Chrome和Safari瀏覽器將在60％左右。 6年前已經有一個question問，但沒有說什麼。

在Firefox上：

在谷歌Chrome和Safari：

這一點plnkr試圖重新我的情況

來源

2016-09-05 Adrian Serna

請提供相關的HTML，並剪下任何不會影響問題的CSS（例如，我們不需要'visibility：visible'，因爲沒有設置爲'visibility：hidden'）。如果您使用「snippet」（如果您點擊「編輯」，則使用「< >」圖標），我們將能夠看到結果演示！ – henry

這不是一個答案，但評論不會讓我包括我需要的格式...

@page是不是一個有效的媒體查詢，將只是忽略。對於打印樣式，這應該是@media print。 margin不適用於任何東西 - 你想要的東西像

@media print { 
    mytargetelement { 
     margin: 5mm 
    } 
}

這是否幫助你的問題呢？

來源

2016-09-05 19:16:20 henry

不起作用：/ –

這是您編輯問題之前唯一可以提出的建議添加完整（但最小）的示例:) http://stackoverflow.com/help/mcve – henry

在鉻和Safari瀏覽器上打印寬度不同

回答

相關問題