WKHTMLTOPDF - 边框出现在 pdf 上答案

【问题标题】：WKHTMLTOPDF - borders appear on pdfsWKHTMLTOPDF - 边框出现在 pdf 上
【发布时间】：2017-10-25 16:34:08
【问题描述】：

我有一个数据网页，我使用 wkhtmltopdf 0.12.3.2（带有修补的 qt）导出到 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%
}

【问题讨论】：

对于故障排除尝试：删除box-shadow: 0px 0px 1px #fff; & `dir="ltr" style="direction: ltr;"`。请尝试添加额外的 div。您可能需要将内容再嵌套一层。另外，您能否检查元素（在 html 视图中；当然）并告诉我们 box-sizing 是什么？
另外， --disable-smart-shrinking / --enable-smart-shrinking 有帮助吗？ wkhtmltopdf.org/usage/wkhtmltopdf.txt
admcfajn，谢谢。我已经尝试了您的所有建议，但仍然出现“幽灵”边界。 --disable-smart-shrinking / --enable-smart-shrinking 似乎没有任何影响。
您能否检查元素（在 html 视图中；当然）并告诉我们 box-sizing 是什么？将边框框更改为内容框（反之亦然）可以发挥重要作用。
盒子大小是border-box。我已将其更改为content-box，但问题仍然存在。这非常令人沮丧。

标签： html css pdf wkhtmltopdf

【解决方案1】：

使用: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;
}

【讨论】：

非常欢迎！感谢独特的问题。很高兴我能帮上忙。