打印具有线性渐变和边框的 CSS 对象时，线性渐变背景消失

Question

如果您尝试使用 Chrome 打印以下页面，您将得到黑色背景。如果删除边框，则可以打印背景。请进行测试。这是 Chrome 中的一个错误吗？

<style>
#div1{
  width:340px;height:150px;
  border:1px solid #000;
  background:linear-gradient(#fff,#0cf);
}
</style>
<div id=div1>
  Something
</div>

谢谢

Answer 1

我相信我也遇到同样的问题。Chrome 41.0.2272.101m 的打印预览和打印输出如下所示：

虽然 Firefox 可以正确打印（尽管不那么吸引人）

该区域由渐变填充组成

.greenRedGradient
{
    background: #00aa00; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #00aa00 0%, #ffff00 50%, #ff0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00aa00), color-stop(50%,#ffff00), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* IE10+ */
    background: linear-gradient(to right,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* W3C */
    padding:3px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa00', endColorstr='#ff0000',GradientType=1 ); /* IE6-8 */
}

底部/侧面由圆角边框包围

.areaGroup > footer > div:last-child {
    width:66%; overflow:hidden; border:2px solid black; border-top:0; padding:0 4px; padding-top:2px;
    webkit-bottom-left-border-radius: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-left-radius: 8px;
    webkit-bottom-right-border-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px;
}

有问题的违规 div：

<div class="greenRedGradient">
    <img src="/img/FeedbackFormArrows-Strength.png" style="float:left;" alt="Feedback form arrow indicating strength"/>
    <div style="margin-left:94px;">
        <img src="/img/FeedbackFormArrows-NeedsAttention.png" style="float:right;" alt="Feedback form arrow indicating need of attention">
        <div style="background:url(/img/FeedbackFormArrows-Dash.png) repeat-x; height:32px; margin-right:145px;"></div>
    </div>
</div>

我可以注释掉强度 <、 ---破折号 --- 和 > 需要注意的三个 PNG（透明背景），这对 Chrome 打印渐变的方式没有影响。

我不认为这有什么区别，但预先预料到了这个问题，错误打印区域垂直上方的 6 个颜色区域是使用 RBGA CSS 代码以 20% Alpha 透明度完成的，如下所示，它们打印正确：

.r21{ background: rgba( 031, 183, 000, 0.20 ); }
.r22{ background: rgba( 127, 228, 000, 0.20 ); }
.r23{ background: rgba( 224, 255, 000, 0.20 ); }
.r24{ background: rgba( 255, 230, 000, 0.20 ); }
.r25{ background: rgba( 255, 134, 000, 0.20 ); }
.r26{ background: rgba( 255, 033, 000, 0.20 ); }

我相信这是最近的一个问题，并且过去可以正确打印，但我根本无法确定，所以我不认为它是相关/值得信赖的信息。