在Chrome中打印CSS - 頁面大小和元素大小（英寸）

Question

我正在使用Chrome中的打印樣式表。它工作正常在Firefox和IE瀏覽器，但是當我嘗試在Chrome中打印以下頁面：

http://jsfiddle.net/htveL/2/

它打印彷彿頁8" ×10.5" ，而不是8.5" ×11" 。例如，這兩個徽章每個都是4「，但它們佔據頁面的整個寬度，頁面右側應該有一個0.5英寸的間隙。

我的目標是每個頁面打印兩個徽章，每個徽章寬4「，高2」。我想徽章是從頁面頂部7英寸左對齊。

.top和.bottom類在那裏向我顯示每頁的頂部和底部是什麼.bottom類應該跨越每個頁面的底部，但它出現在下一頁上.5「。

<div class="book"> 
    <div class="page"> 
     <div class="top">test</div><div class="bottom">bottom</div> 
     <div class="badge">A</div><div class="badge">B</div> 
    </div> 
    <div class="page"> 
     <div class="top">test</div><div class="bottom">bottom</div> 
     <div class="badge">A</div><div class="badge">B</div> 
    </div> 
    <div class="page"> 
     <div class="top">test</div><div class="bottom">bottom</div> 
     <div class="badge">A</div><div class="badge">B</div> 
    </div> 
</div> 

這裏是CSS：

@page { 
    size: 8.5in 11in; 
    margin: 0; 
} 
body { 
    margin: 0; 
    padding: 0; 
} 
.page { 
    height: 11in; 
    position: relative; 
    margin: 0; 
    page-break-after: always; 
    -webkit-region-break-inside: avoid; 
} 
.top { 
    border: 1px solid black; 
    width: 100%; 
    top: 0px; 
} 
.bottom { 
    border: 1px solid black; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
} 
.badge { 
    position: absolute; 
    border: 1px solid black; 
    display: inline-block; 
    top: 8in; 
    width: 4in; 
    height: 2in; 
    margin: 0 0 0 0; 
    padding: 0px; 
} 
.badge + .badge { 
    left: 4in; 
} 

由於提前， 託德

Answer 1

你可以嘗試添加： * { 保證金：0; 填充：0; } 到最頂部的CSS來重置所有的瀏覽器默認設置