我有一个新项目，我需要在屏幕上显示证书，并且还能够在硬拷贝打印机上打印出来。我需要显示4个基于用户等级或课程的字段。我的问题是我使用CSS将证书的图像显示为DIV中的背景图像，就其他4个可变字段而言，我使用相对定位的TOP和LEFT放置在屏幕上。就屏幕而言，它看起来很棒但是当我将其打印成PDF或硬拷贝时，我失去了字段的位置。它们位于纸张上的图像下方，并且不保留其CSS值...不确定这样编程的最佳方法是什么？我是以错误的方式来做这件事的吗？我用很多文章搜索了网络，尝试了各种解决方案无济于事。在打印DIV中的内容时，您可以使用CSS进行放置吗？这是否可以在Javascript中作为客户端轻松完成，而不是使用PHP和CSS，HTML？
答案 0 :(得分：0)
CSS放置应该适用于打印，除非它没有。我无法确定导致您的具体问题的原因，但我可以建议一种方法，我会尝试解决它。
在HTML中，创建一个单独的样式块，如下所示：
<style type="text/css" media="print">
/* Put print-specific styles here */
</style>
你可以扔掉你想要的任何CSS，它只会影响打印的外观 - 你根本不会弄乱屏幕布局。看看你是否可以这样修复它。祝你好运。
答案 1 :(得分：0)
用于打印的CSS可能很难，部分原因是测试它涉及在不同的浏览器上反复进入打印预览状态。不同的浏览器可以解释印刷的CSS有很大差异。
如果您要打印的内容不会超过一页，我建议您使用绝对定位来处理所有内容。使用英寸（或百分比）作为度量单位，而不是像素或ems。不要忘记，您也可以设置绝对元素的top，left，right和bottom，而不是指定宽度或高度。
@Protonfish关于使用仅打印样式表是正确的。您还可以使用@media print { rules here }在常规样式表中处理一组特定的规则。