如何使用 CSS 覆盖各种浏览器的打印首选项？答案

【问题标题】：How to override the print preferences with CSS for various browsers?如何使用 CSS 覆盖各种浏览器的打印首选项？
【发布时间】：2020-03-02 16:41:39
【问题描述】：

我有以下 CSS：

   @@media only print {
            @@page {
                size: A4 landscape !important;
                margin-top: 0mm !important;
                margin-bottom: 0mm !important;
            }
                #tblPrint tbody tr:nth-child(even) {
                    background-color: #ededed !important;
                }
            * {
                -webkit-print-color-adjust: exact !important;
            }
}

问题如下：

@@page 属性并非对所有浏览器生效，默认浏览器的打印首选项生效，即 (Chrome: A4/Landscape), (Edge: A4/Portrait), (IE: A4/Portrait)，即使我将 size 属性翻转为 size: A3 Portrait !important;同一默认浏览器的打印首选项继续生效。
当我使用“-webkit-print-color-adjust”时，即使我从浏览器的打印首选项中关闭“背景图形”功能，背景颜色属性也会在 Chrome 上生效，但是，它不会除非我从浏览器的打印首选项中打开“打印背景颜色和图像”功能，否则在 IE 上不会生效，因为边缘浏览器无法使 background-color CSS 属性生效。

我需要的解决方案是强制我的 CSS 指定的属性覆盖浏览器的打印首选项，而无需用户指定纸张大小、方向并检查“背景图形/打印背景颜色和图像”从浏览器打印所有浏览器的首选项，请帮助！！

【问题讨论】：

你应该只添加一个@
我试过了，但它只会扭曲CSS，并且在运行页面时出现以下错误：当前上下文中不存在名称'page'
试试这个..你的底部所有样式@media print {}
也试过了，但没有任何改变，@@page 和 background-color 没有生效
inside media you should remove @@.. just class or id

标签： css web printing cross-browser media-queries

【解决方案1】：

添加样式表的底部

css

@media print { 
    body{ background-color:#000;}
}

【讨论】：

解释为什么这个工作会增加这个答案的质量。
这是打印视图的语法..所以你应该像上面的代码一样使用..或者你可以使用单独的样式表来使用媒体打印
您应该将其中的一些内容放入答案本身。上面的评论来自这个答案被删除的评论队列。
请分享您的 css 代码。我将添加打印视图，例如