如何应用CSS进行打印？

我试图在我的一个页面中打印一个div，但我不能在打印时应用css。 在样式标签内写入media =“print”不起作用。 我该怎么办？

 body { font-size:medium; color:Black; font-size:14px; } input { margin:0px; font-size:14px; } .grid { border-color:Gray; border-width:1px; } .alan { border-style:none; } .grid1 { border-color:Gray; border-width:1px; }  

Answer 1

使用以下内容：

Answer 2

有很多方法：

首先：

第二：

第三：

 @media print { body { margin: 0; background-image: none; font-size: 12pt; } } 

希望这对你有帮助..

Answer 3

您在原始邮件中所做的工作将正常运行。 这只是旧学校的做事方式。

需要注意的一点是，浏览器不会在打印模式下应用所有样式。 它挑选并选择适合打印的样式。 我还发现，如果你使用HTML 5 doctype，它会给你略有不同的结果。

这是一个类似于您的简单示例，您可以在浏览器中尝试。

       
Print This?
 
Another Style
   

这是Chrome（v19.0.1077.3 canary）打印预览的屏幕截图，您提到了用它来测试它。

Answer 4

我正在使用Jquery Print Element 1.2插件仅打印div的内容。 这样，您不需要为不想打印的所有元素设置css display：none。

我知道这不是你问题的直接答案，但将其视为一种善意的建议。

例：

 $('SelectorToPrint').printElement(); 

这是我使用classNameToAdd选项的实现：

 function printDiv(divToPrint) { $('#' + divToPrint).printElement( { printBodyOptions: { classNameToAdd: 'printarea' } } ); } 

将插件添加到页面后，您可以在用户单击打印按钮/链接时调用上述function。

 Print part of the page 

您可以下载此插件并在此处查找更多文档。