css - Chrome 打印的奇怪行为

问题描述

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

我在 Mac 上的 Chrome 有一个非常奇怪的问题。

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

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

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

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

正在发生的事情是，布局在 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 是一种流行的浏览器。

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

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

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

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

标签： cssgoogle-chromerendering

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

问题描述

解决方案

推荐阅读