元素仅在打印页面上可见答案

【问题标题】：Element visible only on print page元素仅在打印页面上可见
【发布时间】：2012-06-20 09:44:52
【问题描述】：

我在打印页面上仅显示某些元素时遇到问题。例如，我有一个页面，用户可以在其中看到打印预览（简单的 javascript）。在该打印页面上，我只显示页面中的一些元素（不是全部），用于：

@media print {
  .noPrint {
      display:none;
  }
}

现在，当我将 .noPrint 应用于元素时，它不会显示在打印页面中。但是，如何在页面上创建例如 div，这将在“打印页面”上可见，但在常规页面上不可见。

这就够了，大多数浏览器都支持吗？

@media screen, projection, tv {


 .dontShowThis {
    display:none
  }
}

现在如果我想在打印页面上显示元素而不是在常规页面上，我会这样做

<div class="dontShowThis printIt">Some content goes here</div>

Tnx

【问题讨论】：

标签： html css printing

【解决方案1】：

前段时间我做过类似的事情，我就是这样做的：

@media screen
{
    .noPrint{}
    .noScreen{display:none;}
}

@media print
{
    .noPrint{display:none;}
    .noScreen{}
}

<div class="noScreen">Some content goes here</div>

AFAIK 所有主流浏览器都支持这一点，甚至 IE8 也开始支持它。

【讨论】：