我正在尝试使用 CSS 中的 @page 指令以我希望的方式为我打印打印预览。出于某种原因,无论我的页边距设置为多少,内容都会被压扁,即使数字应该是准确的。这是一个测试示例:
https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code
如果您在此页面上打开打印预览(我正在 chrome 中进行测试),您会发现卡片严重偏离中心。事情是这样的——我的卡片设置为 2.5 英寸 x 3.5 英寸,页面本身设置为 8.5 英寸 x 11 英寸。这意味着我应该在左侧和右侧之间留出大约 1 英寸的边距,在顶部和底部留出 0.5 英寸的边距,这意味着从逻辑上讲,我的边距应该为每一侧减半。但是,如果我真的这样做,它看起来会被压扁:
这是我的@page CSS:
@media print {
html, body, .printable, .results-pane, .embed-view {
width: 8.5in !important;
height: 11in !important;
}
@page {
size: 8.5in 11in;
margin-top: 0.25in;
margin-left: 0.5in;
margin-right: 0.5in;
margin-bottom: 0.25in;
}
}
即使我尝试手动设置边距,问题仍然存在,并且您甚至可以看到我的内容被压缩了。这是完全没有边距的样子(留有 1 英寸和 0.5 英寸的边距):
下面是我自己设置边距时的样子:
有什么方法可以阻止浏览器执行这种压缩行为,或者使用我的@print 查询来解决这个问题?作为引用,我已经尝试在正文本身上设置边距,但顶部/底部边距不会在多个打印页面上持续存在。
最佳答案
幸运的是,这实际上是第一个媒体查询的问题:
html, body, .printable, .results-pane, .embed-view {
width: 8.5in !important;
height: 11in !important;
}
因为这些都被设置为相同的大小,所以它们相互推开。解决方案是让 html
具有正确的宽度/高度,一切都从那里开始就位。
关于css - 打印预览压缩内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37908062/