php - 尝试在保留 CSS 值的同时使用定位放置打印出 DIV 的内容？

Question

我有一个新项目，我需要在屏幕上显示证书，并且还可以在硬拷贝打印机上打印出来。我需要显示 4 个字段，这些字段基于用户等级课程或所修课程。我的问题是我使用 CSS 将证书图像显示为 DIV 中的背景图像，就其他 4 个变量字段而言，我使用 TOP 和 LEFT 的相对定位来放置在屏幕上。就屏幕而言，它看起来很棒，但是当我将其打印为 PDF 或硬拷贝时，我失去了字段的定位。它们在纸上的图像下方，也不保留它们的 CSS 值......不确定编写这样的东西的最佳方法是什么？我会以错误的方式解决这个问题吗？我在网上搜索了很多文章，尝试了各种解决方案均无济于事。打印 DIV 中的内容时可以使用 CSS 进行放置吗？这是不是很容易在 Javascript 作为客户端而不是使用 PHP 以及 CSS、HTML 来完成的事情？

Answer 1

CSS 放置应该可以很好地打印，除非它没有。我无法确定是什么导致了您的具体问题，但我可以建议一种方法来尝试解决它。

在您的 HTML 中，创建一个单独的样式块，如下所示：

<style type="text/css" media="print">
/* Put print-specific styles here */
</style>

你可以在里面扔任何你想要的 CSS，它只会影响打印的外观——你根本不会弄乱屏幕布局。看看你能不能用这种方法解决它。祝你好运。

Answer 2

用于打印的 CSS 可能很难，部分原因是测试它涉及在不同的浏览器上一次又一次地进入打印预览状态。并且不同的浏览器可以解释打印的 CSS 有很大的差异。

如果您要打印的内容您知道将占用不到一页，我建议您对几乎所有内容都使用绝对定位。使用英寸（或百分比）作为度量单位，而不是像素或 em。不要忘记您也可以只设置绝对元素的 、 、 和 ，而不是指定宽度top或left高度right。bottom

@Protonfish 关于使用仅打印样式表是正确的。您还可以使用@media print { rules here }.