@media 打印不适用于 display:none

Question

我为此绞尽脑汁几个小时，但我终究无法弄清楚为什么它不起作用。我有一个 Wordpress 站点，我想在其中隐藏页眉、菜单和页脚内容以防止打印。在我的主题的 style.css 文件中，最底部有一个名为 @media print 的部分，其中存储了所有特定于打印的样式。我尝试在本节中添加以下内容：

#search-box-wrap,
#search-box,
#inner-header,
#site-heading,
#site-generator,
#header,
#menu,
#sidebar,
#footer {
    display:none !important;
}

基本上所有这些 ID 都是我 Wordpress 站点中的 header/menu/footer div ID。

我的样式表link如下：

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

我发现很多主题都建议从上面的样式表 link 中取出 media 参数（我已经这样做了），因为当您将打印样式包含在常规样式表中时，您不能只使用 media="screen" 属性...这是有道理的，但我不明白为什么它仍然不起作用？

当我转到打印预览或使用我的 Web 开发人员工具栏查看仅打印 CSS 样式时，即使在我的 [=30= 中添加了此代码，我仍然看到 header/menu/footer 部分] 文件。谁能帮我解决为什么这不起作用？

Answer 1

如果您想使用此样式进行打印，则应添加 media="print"，见下文：

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="print" />

查看有关媒体类型的更多信息here

print

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.

更新： 在与 OP 讨论后，这是有效的

尝试不使用 PHP 代码直接链接

@media 打印不适用于 display:none

@media print not working with display:none

css

printing

media-queries