WKHTMLTOPDF - 枠線がpdfsに表示されます

Question

wkhtmltopdf 0.12.3.2（パッチ付きqt付き）を使用してpdfにエクスポートするデータのWebページがあります。

データを画面上に表示されている場合、私が以下に示すように、それを表示させたいとまったく同じように見えます：

データを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% 
} 

Answer 1

ドロップシャドウ/ぼかしを引き起こしwkhtmltopdfダブルボーダーと背景色の問題を修正するため:beforeを使用しました。ボックスモデルのトラブルシューティングの試みについては、レンダリング、アンチエイリアシング、バグ

<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; 
}