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

I am trying to display a banner on a report while printing but it doesn't print. What I did was I set the display status to display:none in my regular CSS

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

#transfer_head2
{
display:none;
}

and I changed the display status to display:block in my print CSS

并且我将显示状态更改为display：block in my print CSS

#transfer_head2
{
display:block;
}

but this is not working. Why? Can anybody help me?

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

5 个解决方案

#1

Check the ordering of your CSS files and the media defined. Your print.css should come last so that it can override any CSS with media=all. Using Firefox with the Web Developer plugin you can change the CSS in your browser to display as if it were print media. You might want to try that in conjunction with the inspection facilities of Firebug to see what CSS is being applied from where.

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

#2

Maybe your display: none is overwritten by another property later defined. Try !important

也许你的显示：none被后来定义的另一个属性覆盖。试试！重要

display:block !important;

#3

Is #transfer_head2 a TABLE? If so, you need to use:

＃transfer_head2是一个表吗？如果是这样，您需要使用：

#transfer_head2 { display: table; }

Is it a TR?

是TR吗？

#transfer_head2 { display: table-row; }

Is it a TD or a TH? Then it's the following:

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

#transfer_head2 { display: table-cell; }

Note that those are not supported in IE6 or lower. In which case you might want to use something like the following:

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

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

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

EDIT: I forgot to specify this in my original post but keep in mind that most browser configurations have background printing disabled by default, so if you have something like the following in your CSS:

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

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

it will not print no matter what the display mode. If you have control over the user's browser configuration, this is a non-issue, but in most cases, you will want to use an IMG tag for your banner.

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

#4

Make sure the container divs (if any) is not hidden
确保未隐藏容器div（如果有）
Check the generated source with web developer toolbar to see the inherited properties of the div.
使用Web开发人员工具栏检查生成的源，以查看div的继承属性。

#5

Without seeing the code of #transfer_head2 it's hard to tell, you should paste it into your question.

如果没有看到＃transfer_head2的代码，很难说，你应该将它粘贴到你的问题中。

One possible reason could be that you have made the banner a background for #transfer_head2 element, and browsers are usually set not to print backgrounds by default.

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

EDIT: ugh, Andrew has covered that already...

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

#1

#2