为什么我不能使用 CSS 更改显示状态？答案

【问题标题】：Why can't I change the display status using CSS?为什么我不能使用 CSS 更改显示状态？
【发布时间】：2010-10-17 02:23:56
【问题描述】：

我试图在打印时在报表上显示横幅，但它不打印。我所做的是在我的常规 CSS 中将显示状态设置为 display:none

#transfer_head2
{
display:none;
}

我在打印 CSS 中将显示状态更改为 display:block

#transfer_head2
{
display:block;
}

但这不起作用。为什么？有人可以帮帮我吗？

【问题讨论】：

标签： php html css printing

【解决方案1】：

检查 CSS 文件的顺序和定义的媒体。您的 print.css 应该排在最后，以便它可以使用 media=all 覆盖任何 CSS。将 Firefox 与 Web Developer 插件一起使用，您可以更改浏览器中的 CSS，使其像打印媒体一样显示。您可能想尝试结合 Firebug 的检查工具来查看从何处应用了哪些 CSS。

【讨论】：

【解决方案2】：

也许您的display: none 被稍后定义的另一个属性覆盖。试试！重要的

display:block !important;

【讨论】：

【解决方案3】：

#transfer_head2 是 TABLE 吗？如果是这样，你需要使用：

#transfer_head2 { display: table; }

是TR吗？

#transfer_head2 { display: table-row; }

是TD 还是TH？然后是以下内容：

#transfer_head2 { display: table-cell; }

请注意，IE6 或更低版本不支持这些。在这种情况下，您可能需要使用以下内容：

@media screen {
    #transfer_head2 { height: 1px; width: 1px; overflow: hidden; visibility: hidden; }
}

@media print {
    #transfer_head2 { height: 60px; width: 468px; visibility: visible; }
}

编辑：我忘记在我的原始帖子中指定这一点，但请记住，大多数浏览器配置默认禁用后台打印，因此如果您的 CSS 中有以下内容：

#transfer_head2 { background-image: url('../image/print_banner.jpg'); }

无论display 模式如何，它都不会打印。如果您可以控制用户的浏览器配置，这不是问题，但在大多数情况下，您会希望为您的横幅使用 IMG 标记。

【讨论】：

【解决方案4】：

确保容器 div（如果有）未被隐藏
使用 Web 开发人员工具栏检查生成的源代码以查看 div 的继承属性。

【讨论】：

【解决方案5】：

没有看到#transfer_head2的代码很难说，你应该把它粘贴到你的问题中。

一个可能的原因是您将横幅设置为 #transfer_head2 元素的背景，而浏览器通常默认设置为不打印背景。

编辑：呃，Andrew 已经介绍过了……

【讨论】：