gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 07:30:55 26 4
gpt4 key购买 nike

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

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

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

这是一个简单的 JS 应用程序,它获取日期、计算时差,然后显示一堆带有已授予 key 标签的榫眼透明 PNG 图像。它们在两种布局中相互重叠:

垂直的,其中一个在垂直“链”中放置在另一个之上,并且

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

发生的事情是,布局在 Safari 和 FF 中显示(和打印)良好,但在 Chrome 中,打印出现问题。屏幕显示很好,在设备 Pane 设置为打印的情况下查看它也显示它们很好。

还有一个小的 PNG 图像被添加到一些图像中以关闭顶部的环。这是作为顶部、中心背景图像添加的。

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

水平布局一团糟。不显示背景图像,不支持背景透明度。

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

*更新 2: 现在可以作为 fiddle 使用,此处:http://jsbin.com/kakirinife/edit?html,output

(Fiddle)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('/image/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="/image/AVIug.png">
<img class="NACC-Keytag NACC-Keytag-Ringtop" src="/image/j11kj.png">
</div>
</div>
<div class="NACC-Results">
<div class="NACC-Keytags">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="/image/AVIug.png">
<img class="NACC-Keytag" src="/image/j11kj.png">
</div>
</div>
</body>
</html>
</body>

图像:

images/00_RingTop.png images/01_Front.png images/02_Front.png

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

我将添加显示所发生情况的图像。

首先,这是屏幕上的垂直格式:

Looks great!

接下来,这是屏幕上的水平图像:

Shiny!

现在,这是打印出来的两个:

Note missing background picture

Note opaque background and missing background picture

最佳答案

为了后代:Chrome 已经修复了这个错误。

关于css - Chrome 打印的奇怪行为 - CSS 修复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52060900/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com