Question

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

#transfer_head2
{
display:none;
}

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

#transfer_head2
{
display:block;
}

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

Answer 1

检查CSS文件的顺序和定义的媒体。你的print.css应该是最后一个，以便它可以用media=all覆盖任何CSS。将Firefox与Web Developer插件一起使用，您可以更改浏览器中的CSS，使其显示为打印介质。您可能希望与Firebug的检查工具一起尝试，以查看从哪里应用CSS。

Answer 2

也许您的display: none会被后来定义的其他属性覆盖。试试！重要

display:block !important;

Answer 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标记。

Answer 4

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

Answer 5

如果没有看到#transfer_head2的代码很难说，您应该将其粘贴到您的问题中。

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

编辑：呃，安德鲁已经覆盖了......

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

5 个答案: