wkhtmltopdf输出不一致答案

【问题标题】：Wkhtmltopdf inconsistent outputwkhtmltopdf输出不一致
【发布时间】：2018-04-30 02:47:05
【问题描述】：

我正在通过 wkhtmltopdf 输出一些 html，并使用自定义页眉和页脚。

标头html如下：

<!doctype html>
<html>
<head>
    <style>
        body {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .page-header {
            background: #2A5266 -webkit-linear-gradient(
                left,
                #cbd5da 0,
                #cbd5da 50pt,
                white 50pt,
                white 75pt,
                #cbd5da 75pt,
                #cbd5da 100pt,
                white 100pt,
                white 125pt,
                #2A5266 125pt,
                #2A5266
            );
            height: 72pt;
            border: none;
            margin: 0;
            padding: 0;
            width: 100%;
            position: relative;
            display: block;
        }
    </style>
</head>
<body>

    <div class="page-header">
    </div>

</body>
</html>

页脚html是：

<!doctype html>
<html>
<head>
    <style>
        body {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .page-footer {
            background: #2A5266 -webkit-linear-gradient(
                left,
                #cbd5da 0,
                #cbd5da 50pt,
                white 50pt,
                white 75pt,
                #cbd5da 75pt,
                #cbd5da 100pt,
                white 100pt,
                white 125pt,
                #2A5266 125pt,
                #2A5266
            );
            height: 26pt;
            border: none;
            margin: 0;
            padding: 0;
            width: 100%;
            position: relative;
            display: block;
        }
    </style>
</head>
<body>

<div class="page-footer"></div>

</body>
</html>

我使用的命令如下：

wkhtmltopdf -L 0cm -R 0cm -T 2.75cm -B 0.7cm -O landscape --footer-html http://foo.com/footer --header-html http://foo.com/header --header-spacing 5 http://foo.com/html output.pdf

一切都 100% 正常工作，但标题没有使用线性渐变。它几乎就像线性渐变被完全忽略了，因为标题只是一个纯深的蓝色。如您所见，页眉和页脚的 html 几乎相同，因此它适用于页脚而不适用于页眉是没有意义的。

如果我更改标题上的position:absolute，则会出现标题渐变，但这会导致太多其他问题。

【问题讨论】：

标签： html css pdf pdf-generation wkhtmltopdf

【解决方案1】：

最后我使用了一个表格，为每个 td 元素设置了明确的宽度，效果很好。

【讨论】：