Question

我正在使用Chrome中的打印样式表。它在Firefox和IE中正常工作，但当我尝试在Chrome中打印以下页面时：

打印好像页面是8“x 10.5”而不是8.5“x 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的最顶层重置所有浏览器默认值

在Chrome中打印CSS - 以英寸为单位的页面大小和元素大小

1 个答案: