1
我正在使用Chrome中的打印樣式表。它工作正常在Firefox和IE瀏覽器,但是當我嘗試在Chrome中打印以下頁面:在Chrome中打印CSS - 頁面大小和元素大小(英寸)
它打印彷彿頁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;
}
由於提前, 託德
這沒有奏效,但添加.page {width:8.5in; }做的伎倆。我不明白它爲什麼會起作用 - 但是Chrome瀏覽器的打印頁面上的塊div似乎不能正確填充頁面的寬度。看看:http://jsfiddle.net/htveL/4/ – user3345225