我试图以我希望它在CSS中使用@page指令的方式为我打印打印预览.出于某种原因,无论我的页边距设置为什么,内容都会被压扁,即使数字被认为是精确的.这是一个测试的例子：
https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code
如果你打开这个页面上的打印预览(我正在测试chrome),你会发现这些卡非常偏离中心.不过这是件事 – 我的卡片设置为2.5英寸×3.5英寸,页面本身设置为8.5英寸×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,.embed-view {
width: 8.5in !important;
height: 11in !important;
}
因为这些都被设置为相同的大小,他们互相推出.决议是让html正确的宽度/高度,所有sorta从那里落地.
