如何通過CSS設置Safari打印邊距以打印無邊框

Question

我想在Safari中將網頁打印爲沒有任何邊距的PDF。頁面尺寸在打印對話框中設置爲「A4無邊框」。

無論我做什麼，OSX上的Safari都會在我的HTML上添加額外的邊距。檢查'打印背景'看看我的意思。

很明顯，@ page-rule對Safari沒有任何影響，但還有其他方法嗎？

http://jsfiddle.net/willemvb/psFHC/

@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

有3件事情需要考慮：

1. 頁的規則的保證金，可惜

   @page { 
   margin: 0cm !important; 
   } 
   

   哈對Safari 6沒有任何影響，它在Chrome 23中的作用。據我所知，只要Safari不支持這一點，就沒有解決方案（它似乎固定在10毫米左右）。

2. 頁面設置如下所示here您可能需要在「Print ...」菜單面板中定義自定義「紙張大小」而沒有任何頁邊空白（您已經做了btw）。

3. 顯然要照顧其他內容html，body ...沒有任何餘量。

Answer 2

所選答案並不完全正確。要正確回答您需要首先了解問題的問題。

無邊距打印和打印機：

很少有打印機能夠「實際上是」打印，即使他們說，他們做的無邊距打印。大多數只是放大打印一點，所以它超出了實際的頁面，通常，給你一個滑塊來調整這個數量。原因在於大多數打印機沒有傳感器來確定紙張的實際位置，它假定紙張在那裏，對於大多數打印件，如果它是0.5mm或甚至1mm，則無關緊要。

對於無邊界，它很重要，因爲打印出來的周圍有白色（紙張）邊框。

由於這個原因，有95％的打印機在那裏模仿這種「無邊界」的打印，實際上將油墨稀薄地塗在空氣中一點點，所以紙張一直覆蓋到邊緣。打印到稀薄的空氣中是不好的，可能會導致長時間的污跡，應該避免，因此必須將邊緣的打印量調整到最小。

良好的大幅面打印機有一個傳感器來檢測紙張寬度，但它用於稍微調整紙張，因爲每卷50至150米的長度會導致即使0.1mm的未對齊也成爲問題並導致卡紙。

要完全解決這個問題，使用「流血」，在那裏你實際上設計的所有東西都是稍大的紙張，然後再裁剪成大小。

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

年起CSS無邊距打印的問題：

要充分認識這個問題必須與「盒子」相識。

盒子模型CSS幾乎每一個元素的行爲。要打印通常是包裹在某種形式的標籤頁面，無論是與一個div和id或類是這樣的：

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

我們將談論的黑線，稱爲邊境，它是兩個兄弟姐妹「邊緣」和「填充」。

大多數人並不知道的事實是，每臺打印機實際上都會報告其內部的頁邊距，可以爲其支持的每種紙張尺寸打印。

這是HP 2800dtn的操作（只需將鼠標懸停在紙張大小上一會就會出現）。

「修復」：

Safari正在做正確的事情。我說過了......這不是一個錯誤。

它顯然拒絕產生無邊界打印的原因是它實際上不可能（在現實世界中）。您可以做到這一點，但以100％縮放比例打印的用戶會將打印機的內容裁剪掉，正如我所描述的，打印機無法打印到邊緣。因此，大多數人需要「適合紙張」邊距（默認OS X行爲，縮小到約98％變焦），然後在打印機上啓用無邊框模式，然後將縮小的98％變焦倍數放大到103％。如果你做數學，你會得到一個奇怪的數字，可能是原始版本的101.5％（我不能肯定地說，如果它不是兩除，我不擅長數學:) 這不是這正是字體和矢量圖形的問題，但它在像素世界造成了巨大的破壞。像像我一樣，像素世界默認喜歡數字2，其餘的只是「平滑」它。

所以你不能修復它，因爲它沒有損壞。 Safari將div的邊框及其內部元素放置在打印機報告的紙張的「可打印區域」內。好！

解決辦法：

你可以不知道打印機的利潤率，直到你命令+ P 和選擇紙張大小。

但是，你可以在CSS中做什麼來獲得「你看到的是你得到的」感覺每個人都喜歡？

1. 在您定義的div.page上使用邊距。請注意，保證金是從包含該div的元素計算得出的。所以，你需要換行page在actualpage

定義每個媒體類型CSS使屏幕顯示虛打印邊距（接近真實的東西），並打印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 */ 
    ... 
    } 
}