Question

我想在Safari中打印一个没有任何边距的PDF页面。在打印对话框中，页面大小设置为“A4无边框”。

无论我做什么，OSX上的Safari都会为我的HTML添加额外的余量。检查'打印背景'，看看我的意思。

显然，@ page-rule对Safari没有任何影响，但还有其他方法吗？

@page {
  size: 21cm 29.7cm;   /*A4*/
  margin: 0; /*webkit says no*/
}

html{
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    width: 100%; 
    background: #eee;
}

Answer 1

有三件事需要考虑：

遗憾的是，页面规则的边距
```
@page {
margin: 0cm !important;
}
```
对Safari 6没有影响，它在Chrome 23中没有效果。据我所知，只要Safari不支持，就没有解决方案（它似乎固定在10mm左右）。
< / LI>
如here所示的页面设置您可能需要在“打印...”菜单面板中定义一个自定义的“纸张尺寸”而没有任何余量（您已经这样做了）。
显然要照顾其他内容html，身体......没有任何余地。

Answer 2

所选答案并不完全正确。要正确回答问题，您需要先了解问题。

无边距打印和打印机：

很少有打印机可以“实际”打印无边框打印件，即使他们这样做也是如此。大多数只是将打印放大一点，使其超出实际页面，通常会给你一个滑块来调整这个数量。原因是大多数打印机没有传感器来确定纸张的实际位置，它假定纸张在那里，对于大多数打印件，如果它是0.5mm关闭甚至1mm都无关紧要。

对于无边框而言，它很重要，因为印刷品周围有白色（纸质）边框。

出于这个原因，95％的打印机模仿这种“无边框”打印，实际上将墨水稀释到空气中一点点，这样纸张一直覆盖到边缘。打印到稀薄的空气中是不好的，长期会造成污迹，应该避免，因此必须将边缘上的打印量调整到最小。

好的大幅面打印机有一个检测纸张宽度的传感器，但是它用于稍微调整纸张，因为每卷50到150米的长度可能导致甚至0.1毫米的不对齐成为问题并导致卡纸。 / p>

为了完全解决这个问题，使用了“出血”，你实际上将所有东西设计成稍大的纸张，然后将其切割成大小。

好的......现在你知道了。

继续解决CSS无边框打印问题：

要完全理解这个问题，必须熟悉“盒子”。

Box模拟了CSS中几乎每个元素的行为。您要打印的页面通常包含在某种标记中，可以是div和id，也可以是这样的类：

<div class="page">lots of content</div>

我们将谈论黑线，称为 border ，它是两个兄弟姐妹“边缘”和“填充”。

大多数人都不知道的是，每个打印机实际报告其中的边距可以打印它支持的每种纸张尺寸。

这是HP 2800dtn这样做（只悬停在纸张尺寸上一段时间后会出现）。

“修复”：

Safari正在做正确的事情。我在那里说过......这不是一个错误。

它显然拒绝制作无边框打印的原因是它实际上是不可能的（在现实世界中）。你可以这样做，但是人们以100％的缩放率打印它会使打印机修剪掉内容，正如我所描述的那样，打印机无法打印到边缘。

因此大多数都必须“适合纸张”边距（默认的OS X行为，缩小到大约98％变焦）然后在打印机上启用无边框模式，从而将缩小的98％缩放版本放大到103％。如果你做数学计算，你会得到一个奇怪的数字，可能是原版本的101.5％（我不能肯定地说，如果没有两个，我不是很擅长数学:) 对于字体和矢量图形来说，这不是一个问题，但它会在像素世界中造成严重破坏。像我一样，像素世界喜欢默认情况下的数字2，其余的只是“平滑”它。

所以你无法修复它，因为它没有被破坏。 Safari将div的边框及其所有内部元素放入打印机报告的纸张“可打印区域”内。好！的

解决方案：

在命令+ p 和选择纸张尺寸之前，您无法知道打印机边距。

但你能用CSS做些什么才能让每个人都喜欢的“你所看到的就是你得到的”？

使用您定义的div.page上的边距。请注意，保证金是从包含该div的元素计算出来的。因此，您需要将page包裹在actualpage

为每种媒体类型定义CSS，以便屏幕显示虚构的打印边距（接近真实的东西），而print get是没有边距的版本。

/* @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 */
  ...
  }
}

如何通过CSS设置Safari打印边距以打印无边框

2 个答案: