Chrome 打印的奇怪行为 - CSS 修复？答案

【问题标题】：Strange Behavior of Chrome Print - CSS Fix?Chrome 打印的奇怪行为 - CSS 修复？
【发布时间】：2018-08-28 14:57:58
【问题描述】：

META：我在Webmasters Stack Exchange 上问过这个问题，但他们启动了它，并告诉我在这里问。显然，网站管理员只想谈论 SEO。原帖：

我在 Mac 上使用 Chrome 时遇到一个非常奇怪的问题。

我有这个页面：https://heartoflongislandna.org/cleantime/

这是一个简单的 JS 应用程序，它需要一个日期，计算一个时间差，然后显示一堆透明的 PNG 图像，这些图像显示获得的 keytags。它们在两种布局中相互重叠：

垂直，其中一个以垂直“链”的形式放置在另一个之上，并且

水平，它们并排放置，但重叠，就像一副展开的纸牌。

发生的情况是，布局在 Safari 和 FF 中显示（和打印）正常，但在 Chrome 中，打印出错了。屏幕显示很好，在设备窗格设置为打印的情况下查看它也显示它们很好。

还有一个小的PNG图像被添加到一些图像中以关闭顶部的环。它被添加为顶部居中的背景图像。

垂直布局比水平布局好一点，因为背景透明度得到尊重，但背景图像丢失（顶部键标签）。

横向布局一团糟。不显示背景图片，不尊重背景透明度。

我将补充一点，在 Chrome 的设备视图面板设置为“打印”的情况下检查它不会显示问题。看起来不错。打印预览显示问题，在预览中打开图像也显示问题，这是在渲染器中。

*更新 2：现在可以在此处使用小提琴：http://jsbin.com/kakirinife/edit?html,output

（小提琴）HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>CSS Issue Demo</title>
        <style type="text/css">
            /** This is the container for the keytag display. */
            .NACC-Keytags {
                margin-top: 122px;
                display: table;
                margin-left: auto;
                margin-right: auto;
                background-color: transparent;
            }

            /** This allows us to compensate for the automatic offset of the tags. */
            .NACC-Keytag-Tabular {
                margin-top: 82px;
                padding-right: 50px;
                text-align:left;
            }

            /** This describes a keytag image layout. */
            .NACC-Keytag {
                width: 100px;
                max-width:100px;
                overflow: visible;
                margin-top:-122px;
                display: block;
                margin-left: auto;
                margin-right:auto;
                background-color: transparent;
            }

            /** If we are displaying a closed ring, then we add an image to the background. */
            .NACC-Keytag.NACC-Keytag-Ringtop {
                background-image: url('https://i.stack.imgur.com/QcEYN.png');
                background-position: center top;
                background-size: 100%;
                background-repeat: no-repeat;
                background-attachment: local;
            }

            /** We display inline-block, so we get a flow that will wrap. */
            .NACC-Keytag-Tabular .NACC-Keytag {
                display: inline-block;
                margin-top:-82px;
                margin-right:-50px;
            }
        </style>
    </head>
    <body>
        <div class="NACC-Results">
            <div class="NACC-Keytags NACC-Keytag-Tabular">
                <img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
                <img class="NACC-Keytag NACC-Keytag-Ringtop" src="https://i.stack.imgur.com/j11kj.png">
            </div>
        </div>
        <div class="NACC-Results">
            <div class="NACC-Keytags">
                <img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
                <img class="NACC-Keytag" src="https://i.stack.imgur.com/j11kj.png">
            </div>
        </div>
    </body>
</html>
</body>

图片：

更新：我确定这可能是一个 Chrome 错误，并报告了它，但我仍在寻找可以应用的 CSS 修复程序。 Chrome 是一种流行的浏览器。

我将添加显示发生了什么的图像。

首先，这是屏幕上的垂直格式：

接下来，这是屏幕上的水平图像：

现在，这两个都是打印出来的：

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/demo doesn't work can I just paste a link。
因此需要 minimal 演示。
我不确定这是否有所改善，但你去吧。
您的帖子现在太大了，以至于在大量图像和“更新”中丢失了实际问题。你能把它浓缩成更容易消化的东西吗？
使用 sn-p 按钮（第 7 个图标）。它的工作方式类似于 JSFiddle 或 CodePen。但是，我们不太可能需要查看整个页面的代码。

标签： css google-chrome rendering

【解决方案1】：

只是为了后代：Chrome 已经修复了这个错误。

【讨论】：