所选答案不太正确。要正确回答问题,您需要先了解问题。
无边界打印和打印机:
即使他们说可以打印,也很少有打印机可以“实际”打印无边距打印件。大多数只是将打印放大一点,使其超出实际页面,并且通常会给您一个滑块来调整该数量。原因是大多数打印机没有传感器来确定纸张的实际位置,它假定纸张在那里,对于大多数打印来说,它是否偏离 0.5 毫米甚至 1 毫米都没有关系。
对于无边框来说,这很重要,因为打印出来的时候周围有一个白色(纸)边框。
出于这个原因,95% 的打印机模仿这种“无边界”打印,实际上是让墨水在稀薄的空气中运行一点点,这样纸张就一直被覆盖到边缘。在稀薄的空气中打印不好,长期会造成污迹,应避免,因此必须将边缘打印量调整到最低限度。
良好的大幅面打印机有一个传感器来检测纸张宽度,但它用于稍微调整纸张,因为每卷 50 到 150m 的长度甚至会导致 0.1mm 的错位成为问题并导致卡纸。
为了彻底解决这个问题,使用了“出血”,您实际上将所有内容设计为稍大的纸张,然后将其切割成一定尺寸。
好的……现在你知道了。
继续讨论 CSS 无边框打印的问题:
要完全理解这个问题,必须熟悉“盒子”。
Box 模拟了 CSS 中几乎每个元素的行为。您要打印的页面通常包含在某种标签中,可以是带有 id 的 div 或类似这样的类:
<div class="page">lots of content</div>
我们将讨论黑线,称为 border,它是“margin”和“padding”的两个兄弟。
大多数人不知道的是,每台打印机实际上都报告了它所支持的每种纸张尺寸的页边距。
这是一个这样做的 HP 2800dtn(只需将鼠标悬停在纸张尺寸上一段时间,它就会出现)。
“修复”:
Safari 正在做正确的事情。我说过了……这不是错误。
它显然拒绝生产无边界打印的原因是它实际上是不可能的(在现实世界中)。你可以做到,但是以 100% 缩放打印它的人会被打印机修剪掉内容,正如我所描述的,它不能打印到边缘。
所以大多数人必须“适应纸张”边距(默认的 OS X 行为,缩小到大约 98% 缩放)然后在打印机上启用无边框模式,这反过来又将缩小的 98% 缩放版本放大到 103%。如果你做数学,你会得到一个奇怪的数字,可能是原始版本的 101.5%(我不能肯定地说,如果它不被二除,我就不太擅长数学:)
这对于字体和矢量图形来说并不完全是一个问题,但它在像素世界中造成了严重破坏。像素世界和我一样喜欢默认数字 2,其余的只是“平滑”它。
所以你不能修复它,因为它没有坏掉。 Safari 将 div 的边框及其所有内部元素置于打印机报告的纸张“可打印区域”内。很好!
解决办法:
在您使用命令+p 并选择纸张尺寸之前,您无法知道打印机边距。
但是您可以在 CSS 中做些什么来获得每个人都喜欢的“所见即所得”的感觉呢?
- 使用您定义的 div.page 上的边距。请注意,边距是根据包含该 div 的元素计算的。所以你需要将
page 包裹在actualpage 中
为每种媒体类型定义 CSS,以便屏幕显示虚构的打印边距(接近真实的东西)并且打印得到的版本是没有边距的版本。
/* @media all { */ /* I like using these */
div.actualpage {
...
height: 210mm; /* DIN A4 standard paper size */
width: 297mm;
...
}
div.page {
...
/* margin: 0; you don't really have to explicitly set it to 0 unless it's already set to something else */
...
}
/* } */
@media screen {
div.page {
...
margin: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
...
}
}
@media print {
div.page {
...
margin: 0mm; /* Browser will apply the correct margins when it prints */
...
}
}
如果您无法将页面包装到另一个 div 中,您可以使用填充来破解它(即:不太优雅的解决方案)。
/* @media all { */ /* I like using these */
div.page {
...
height: 210mm; /* DIN A4 standard paper size */
width: 297mm;
/* padding: 0; you don't really have to explicitly set it to 0 unless it's already set to something else */
...
}
/* } */
@media screen {
div.page {
...
padding: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
...
}
}
@media print {
div.page {
...
padding: 0mm; /* Browser will apply the correct margins when it prints */
...
}
}