Question

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

我在Mac上的Chrome浏览器中遇到了一个非常奇怪的问题。

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

这是一个简单的JS应用，它需要一个日期，计算一个时差，然后显示一堆已分解的透明PNG图像，这些图像会显示获得奖励的标签。它们在两种布局中相互重叠：

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

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

正在发生的情况是，布局在Safari和FF中显示（和打印）良好，但是在Chrome中，打印损坏了。屏幕显示很好，并且在将设备窗格设置为打印的情况下观看也可以正常显示。

在某些图像中还添加了一个小的PNG图像，以关闭顶部的环。它将作为顶部，中心背景图像添加。

垂直布局比水平布局好一点，因为可以保留背景透明性，但是会丢失背景图像（顶部键标）。

水平布局一团糟。不显示背景图像，并且不保证背景透明度。

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

* UPDATE 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>

图片：