当用户打印它时在我的网页上隐藏一个元素答案

【问题标题】：hide one element on my webpage when the user will print it当用户打印它时在我的网页上隐藏一个元素
【发布时间】：2012-10-05 01:24:57
【问题描述】：

我的网站模板打印出来后看起来还不错，所以我没有单独的打印 css。

但是，顶部有一个元素在打印时不需要，大约 2 英寸高，所以打印页面顶部有点浪费（恕我直言，这会分散用户对实际内容的注意力）

所以，我想要完成的是，当用户打印页面时，在页面顶部“隐藏”该元素 (div)。

但到目前为止，我看到的唯一解决方案是创建一个单独的 css 文档，然后在用户打印我的页面时使用该文档。这听起来不错，但我现在是否必须维护 2 个具有完全相同内容的不同样式表（除了一个 div）？

或者是否可以在打印样式表中覆盖标准样式表？（所以我只需要在我的打印样式表中定义那个 div 的例外吗？）

希望这能解释我的问题.....

【问题讨论】：

标签： asp.net css

【解决方案1】：

如果您声明您的主样式表适用于所有媒体 (browsers apply it to all by default)：

<link rel="stylesheet" type="text/css" media="all" href="style.css">

那么添加打印样式表不应该要求您在两个 CSS 文件中复制样式：

<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

您所要做的就是将特定于打印的样式添加到print.css。

但是，如果您想保留一个样式表，并在该样式表中具有特定于打印的覆盖，您可以将规则放在打印媒体规则中：

@media print {
    div.do-not-print {
        display: none;
    }
}

【讨论】：

【解决方案2】：

【讨论】：