CSS 打印时样式丢失

Question

我有一个页面，其中包含必须可打印的统计图表等。我只想使用标准浏览器打印功能来启用打印。我还有 css 可以更改所选按钮的按钮颜色，以明确正在查看哪些图表。但是，我的问题是，当我尝试打印该页面时，此颜色会丢失并重置为其默认显示。

我知道 Chrome 通过使用 CSS 中的 webkit-print-color-adjust 设置可以做到这一点，但是，我公司的绝大多数用户都使用 IE或 Edge（因为它们是 Microsoft 默认设置），因此我需要一个适用于它们的解决方案。

我已经尝试使用 !important 和 @media print 但目前还没有效果，除非我使用错误。

这是目前的 css：

@media print{
    .btn-primary-chart:active,
    .btn-primary-chart.active {
        color: #ffffff;
        background-color: green !important;
        border-color: #285e8e;
    }
}

任何帮助将不胜感激:)

Answer 1

根据 SO 回答 here，您的 CSS 不起作用的原因是浏览器打印设置中的默认设置。

使用 Chrome 和 Safari，您可能需要添加

-webkit-print-color-adjust: exact;

强制打印背景颜色。

Answer 2

在Internet Explorer 和Microsoft Edge 中打印背景还没有万无一失的方法。但是，有一些我以前尝试过的方法在某些情况下可能会奏效：

方法一（使用精灵）：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffad‌a', endColorstr='#fffada')";

方法二:

CSS

.background:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    border-bottom: 1000px solid #eee;
 }

HTML

<body class="background">

但是如果你想自己打印，可以启用'Print Background Color':

To resolve this behavior, turn on the Print background colors and images option in Internet Explorer. To do this, follow these steps:

On the Tools menu, click Internet Options, and then click the Advanced tab.

In the Settings box, under Printing, click to select the Print background colors and images check box, and then click OK.

还有一些类似的 Whosebug 帖子

CSS @media print issues with background-color;
How can I force browsers to print background images in CSS?

Answer 3

我找到了一种甚至可以在 EDGE 浏览器中运行的解决方案。这是基本的 HTML:

<div style="position: relative;width:100%">
     <div style="border-color:green;border-style:solid;
         border-width:15px;width:70%;"></div>
     <div style="position: absolute; top: 50%; 
                transform:translateY(-50%);left: 0px;">
         Hello, world.
     </div>
 </div>

您可以根据需要调整宽度或父级和子级 div。

Answer 4

请尝试在样式中添加“!important”（但不在@media 打印中）。

刚刚遇到打印视图中字体颜色丢失的问题，最后的解决办法是替换

color: red !;

和

color: red !important;

在样式中。

如果不使用"!important"，似乎有些样式会被忽略。

Answer 5

这里值得一提的是，由于我遇到了类似的问题，EDGE 会在忽略 HTML 背景颜色的同时正确呈现 SVG。

所以不要使用：

<div style="background-color:red; width:20px height:20px">...</div>

你可以这样使用：

<svg style="width:20px;height:20px">
    <rect width="100%" height="100%" style="fill:red">
</svg>

CSS 打印时样式丢失

CSS styling lost when printing

html

css

printing

styling