2014-02-24 70 views
1

我正在使用Chrome中的打印樣式表。它工作正常在Firefox和IE瀏覽器,但是當我嘗試在Chrome中打印以下頁面:在Chrome中打印CSS - 頁面大小和元素大小(英寸)

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; 
} 

由於提前, 託德

回答

0

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

+2

這沒有奏效,但添加.page {width:8.5in; }做的伎倆。我不明白它爲什麼會起作用 - 但是Chrome瀏覽器的打印頁面上的塊div似乎不能正確填充頁面的寬度。看看:http://jsfiddle.net/htveL/4/ – user3345225