打印时 CSS 样式丢失

Question

打印时 CSS 样式丢失

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

我知道通过在 CSS 中使用 webkit-print-color-adjust 设置在 Chrome 中执行此操作的功能，但是，我企业中的绝大多数用户使用 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;
    }
}

Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激：）

Answer 1

Pan*_*nda 3

目前还没有任何万无一失的方法可以在 Internet Explorer 和 Microsoft Edge 中打印背景。不过，我之前尝试过一些方法，并且在某些情况下可能有效：

\n

方法一（使用精灵）：

\n

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=\'#fffad\xe2\x80\x8c\xe2\x80\x8ba\', endColorstr=\'#fffada\')";\n

Run Code Online (Sandbox Code Playgroud)\n

方法二：

\n

CSS

\n

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

Run Code Online (Sandbox Code Playgroud)\n

HTML

\n

<body class="background">\n

Run Code Online (Sandbox Code Playgroud)\n

但如果你想自己打印，你可以启用“打印背景颜色”：

\n

\n
要解决此问题，请在 Internet Explorer 中打开“打印背景颜色和图像”选项。为此，请按照下列步骤操作：
\n
\n
在“工具”菜单上，单击“Internet 选项”，然后单击“高级”选项卡。
\n
\n
在“设置”框中的“打印”下，单击以选中“打印背景颜色和图像”复选框，然后单击“确定”。
\n
\n
\n

\n

另外，还有一些类似的 StackOverFlow 帖子

\n

归档时间：	9 年，9 月前
查看次数：	9047 次
最近记录：	3 年，3 月前