在Chrome中打印精確測量結果

如果元素以釐米或英寸爲單位指定測量值，則會以精確的測量值從Firefox和Internet Explorer打印。另一方面，Chrome使元素更大。在Chrome中打印精確測量結果

反正正好在指定的大小，讓Chrome打印的東西，或者是它的東西我就不得不忍受？

E.g.

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     div.box { 
      border: 1px solid black; 
      width: 5cm; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box">box</div> 
    </body> 
</html>

上面的代碼將打印在Firefox和IE的精確5釐米（我的打印機上），但在從約鉻打印5.5釐米。

來源

2013-01-08 Vincent McNabb

（http://stackoverflow.com/questions/13895041/specifying-phyiscal-size-in-css-eg-2- [打印網頁時在CSS（例如2英寸）指定phyiscal大小]的可能重複英寸，當打印-A-網頁） –

@ JukkaK.Korpela完全獨立的問題。在這個問題上的問題是利潤和填充。這在這裏沒有關係。 –

@ JukkaK.Korpela：你對其他問題的回答是對事不對人的問題。此外，您的打印機不是15釐米可能是由於打印機不準確。這是一個特定於瀏覽器的問題。我沒有使用Firefox/IE的問題，但我使用的是Chrome。在投票結束前請閱讀並理解。 –

對於Chrome瀏覽器，只需設置打印邊距的東西，並將主體設置爲紙張寬度減去邊距。

E.g.對於A4頁面，寬度爲210毫米

因此，對於1英寸的頁邊距（大致2.5釐米），你可以做以下

@media print 
{ 
    @page 
    { 
     margin-left: 25mm; 
     margin-right: 25mm; 
    } 

    body 
    { 
     width: 160mm; 
    } 
}

的左，右，和身體的寬度加起來應該210毫米。

對於信你會使用1英寸的頁邊距，並在身上6.5英寸的寬度。

來源

2015-01-25 01:59:01

這適用於我使用A4紙。 – Prinsig

我確定你使用HTML時，試圖指定一些CSS規則來擺脫像填充和利潤明顯的犯罪嫌疑人的，即使有同樣的問題。從我所做的研究中，看起來您只是在渲染媒體查詢時處理不一致的瀏覽器標準。如果可能的話，我會建議基於瀏覽器有條件地設計盒子樣式。其他

一個方面似乎是不指定一個DOCTYPE（這是一個位的一個沒有沒有在發展反正）可導致不一致。

你可以繼續前進，看到這個話題有關問題的更多閱讀：

Firefox versus webkit measurements for media queries based on width

來源

2013-01-08 21:49:12

文檔類型的事情很簡單，因爲它是一個片段。通常，我也會使用外部樣式表。雖然這個例子並不重要。媒體查詢部分也沒有關係，所以我刪除了它並添加了文檔類型。雖然沒有影響它的工作或沒有。 –

有關使用不同的風格不同的頁面大小，因爲一些瀏覽器在頁面中包含的大小滾動條的寬度鏈接的計算器問題的會談，和別人不一樣。這是一個完全獨立的問題。 –

查看Jukka K. Korpela提供的鏈接可能的副本。根據我之前所說的內容，似乎瀏覽器在呈現相同規則時不一致。 –

我已經發現這個問題了。

與論文多浪費張打後，我發現，Chrome會縮放HTML。

例如，在下面的示例中添加一個全寬div，它會正確調整框的大小，因爲您要求Chrome使框100％的頁面，從而強制1：1的比例頁。

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     div.box { 
      border: 1px solid black; 
      width: 5cm; 
     } 
     div.forcer { 
      width: 100%; 
      height: 1px; 
      border: 1px dotted green; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box">box</div> 
    <div class="forcer"></div> 
    </body> 
</html>

不幸的是，當我嘗試這樣做，它並沒有解決身高問題，也是我不能讓箱子0像素沒有失去它的正確比例。

順便說一下，看看下面顯示打印時它是如何影響的大小。

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     div.box { 
      border: 1px solid black; 
      width: 5cm; 
     } 
     div.forcer { 
      width: 200%; 
      height: 1px; 
      border: 1px dotted green; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box">box</div> 
    <div class="forcer"></div> 
    </body> 
</html>

簡而言之：Chrome的打印功能令人震驚！

Firefox的工作更好的打印，但速度要慢得多。

來源

2014-08-11 14:19:04 wkdmarty

另外，我發現這是Chrome中的一個錯誤。 https://code.google.com/p/chromium/issues/detail?id=273306 – wkdmarty

用100％寬格的解決方案並沒有爲我工作在目前的Chrome版本，但這個工程，對於A4紙：

html, body { 
    width: 210mm; 
}

來源

2014-10-29 18:30:00

在Chrome中打印精確測量結果

回答

相關問題