在 A4 页面上打印 html，媒体无法正常工作答案

【问题标题】：print html on A4 page, media not working在 A4 页面上打印 html，媒体无法正常工作
【发布时间】：2018-02-21 20:50:11
【问题描述】：

我需要打印 A4 尺寸的 html 页面，另外我想打印内容正文打印以及 css、html 并忽略菜单列表、页眉、页脚和页面右侧菜单列表。

首先，我介绍了简单的 div 和类 noprint 并将其添加到 @media print 中，但它似乎不起作用。 noprint 类在@media print 之外工作，所以我知道它是正确的。

另外我的要求是使用标准 Ctrl+P 键盘选项直接从浏览器打印

<style type="text/css">

    .standardStyle {
        display:block;
        width:200px;
        height:150px;
        padding:10px;
        background-color:green;
        margin:5px;
    }

    @media print{ 
     .noprint{ color:red;}
    }

</style>

</head>
<body>

<div class="noprint standardStyle">
    this is test line....
</div>

<div class="print standardStyle">
    this is test line....
</div>

<div class="print standardStyle">
    this is test line....
</div>

【问题讨论】：

标签： html css printing css-paged-media

【解决方案1】：

运行 sn-p 并按 Ctrl+P ，您将看到红色的线。截图：

@media print {
       .noprint { color:red; }
 }

<div class="noprint">
        this is test line.....
</div>

【讨论】：

【解决方案2】：

大多数浏览器默认不打印背景颜色和背景图像。我想你错过了绿色背景 - 这就是它的原因。

通常这可以在浏览器的打印对话框中激活，但要强制打印背景，您只能尝试将!important 添加到打印中未正确显示的设置中。

【讨论】：

【解决方案3】：

@media print
{    
  .noprint{      
    display: none !important;        
  }      
}

【讨论】：