WKHTMLTOPDF - 邊框顯示在pdf上

我有一個數據網頁，我使用wkhtmltopdf 0.12.3.2（帶補丁的qt）將其導出爲pdf。WKHTMLTOPDF - 邊框顯示在pdf上

當屏幕上顯示的數據，它看起來完全一樣，我希望它出現如下圖所示：

當數據呈現到PDF，一個「幽靈」邊界出現在如下圖所示的PDF：

當我打印出來的數據，更多的「鬼」的邊界出現在頁面上，如下圖所示：

如何防止出現這些'鬼'邊界？我已經嘗試了很多選擇，但解決方案無法解決。

我試過outline: #fff solid medium !important;但這沒有效果。我也嘗試過box-shadow: 0px 0px 1px #fff;，但這沒有效果。

此問題似乎只發生在CSS border: double值。

這裏是我的html代碼：

<div class="resumeStyleStandardHeadings8" dir="ltr" style="direction: ltr;">Summary Details</div>

這裏是我的CSS代碼：

.resumeStyleStandardHeadings8 { 
    background: #000; 
    border-left: 10px double #fff; 
    border-bottom: 10px double #fff; 
    color: #fff; 
    display: block; 
    font-weight: 700; 
    margin-bottom: 2px; 
    outline: none; 
    overflow: hidden; 
    padding: 2px; 
    padding-bottom: 5px; 
    padding-top: 5px; 
    page-break-inside: avoid; 
    text-transform: uppercase; 
    vertical-align: middle; 
    white-space: nowrap; 
    width: 100% 
}

來源

2017-05-25 user3354539

有關故障排除嘗試：移除'的box-shadow：0像素0像素1px的#FFF;'＆'DIR = 「升」的風格= 「方向：LTR;」' 。並請嘗試添加額外的div。您可能需要將內容嵌套更深一層。此外，你可以檢查元素（當然，在HTML視圖中），並告訴我們盒子的大小是什麼？ – admcfajn

此外，確實： - 禁用智能縮小/ - 啓用智能縮小幫助？ https://wkhtmltopdf.org/usage/wkhtmltopdf.txt – admcfajn

admcfajn，謝謝。我已經嘗試過所有的建議，但仍然會出現「幽靈」邊框。 ' - 禁用智能收縮/ - 啓用智能收縮「似乎沒有任何影響。 – user3354539

使用:before修正引起下拉陰影與wkhtmltopdf雙邊框和背景色的問題/模糊。盒模型，渲染，抗鋸齒，錯誤

<div class="resumeStyleStandardHeadings8" dir="ltr" style="direction: ltr;">Summary Details</div> 


.resumeStyleStandardHeadings8:before{ 
    content: " "; 
    position: absolute; 
    z-index: -1; 
    width:100%; 
    height:36px; 
    margin-left:-9px; 
    margin-top:-5px; 
    background:#000; 
    border-left: 2px solid #fff; 
    border-bottom: 2px solid #fff; 
} 
.resumeStyleStandardHeadings8 { 
    display: block; 
    outline: none; 
    overflow: hidden; 
    page-break-inside: avoid; 
    color: #fff; 
    font-weight: 700; 
    text-transform: uppercase; 
    vertical-align: middle; 
    white-space: nowrap; 
    width: 100%; 
    margin-bottom: 2px; 
    padding: 5px 2px; 
    background: #000; 
    border-left: 2px solid #fff; 
    border-bottom: 2px solid #fff; 
}

來源

2017-05-26 06:11:22 admcfajn

非常感謝。優秀的答案。 – user3354539

非常歡迎！感謝獨特的問題。很高興我能幫上忙。 – admcfajn

WKHTMLTOPDF - 邊框顯示在pdf上

回答

相關問題