CSS 打印问题：边距、文本、背景色答案

【问题标题】：CSS print issues: margins, text, background-colorCSS 打印问题：边距、文本、背景色
【发布时间】：2012-09-14 23:04:14
【问题描述】：

我正在创建一个名称标签解决方案，而使用 Word 的旧方法会导致文件过大和文件损坏。我正在使用 PHP 从数据库中获取名称并将它们打印到 html 页面中。该页面也完美地显示了我想要的内容。

我的问题是，在打印时，应用背景颜色的文本无法正常工作。

我正在使用这种打印样式来打印背景颜色：-webkit-print-color-adjust: exact;

这很好用，直到我读到正文。

显示为

的内容

在输出页面上，打印为

我的 CSS：

.top-bar {
    width:100%;
    height:0.65in;
    background-color:#FFCC00;
    display:block;
    font-size:20pt;
    line-height:200%;
    font-family: Stencil;
    color:#008000;
    position:absolute;
    top:0;
    left:0;
}

我尝试了不同的字体，但似乎没有什么不同。

我正在使用 Windows，从 Chrome 打印。我正在使用cutepdf 打印到PDF，但物理打印产生了相同的结果。

有什么办法可以修正字母的打印方式吗？

【问题讨论】：

如果你能把一个例子放到网上，你可能会得到更多帮助。
我实际上发现这是 Chrome 打印方式的错误，而不是 CSS。我可以完美地从 IE 打印。

标签： html css printing

【解决方案1】：

-webkit-print-color-adjust: exact;

这是解决方案...将其应用于周围的 div。删除文本上的背景颜色，然后将其放在 div 上。

【讨论】：