具有精确A4横向尺寸的空体元素打印在2页上

Question

演示：

print()

@page {
    size: A4 landscape;
    margin: 0;
}
html, body {
    margin: 0;                
}
html {
    background: cyan;
}
body {
    width: 297mm;
    height: 210mm;                
    background: red;
}

A4 landscape的尺寸正确，但打印溢出到第二页。这些发生在Win 10 Chrome 63，FF 52和Edge 41中。

  

当我使用纵向尺寸并打印A4纵向时，只能按预期打印一页，没有任何溢出。

有没有人有这个问题的线索？它是否出现在每个平台上？

提前谢谢

Answer 1

  

使用body {margin-top: -1px }

print()

@page {
    size: A4 landscape;
    margin: 0;
}
html, body {
    margin: 0;      
}
html {
    background: cyan;
}
body {
    width: 297mm;
    height: 210mm;     
    background: red;
    margin-top: -1px;
}

Answer 2

参考此解决方案： HTML：

<div class="book">
    <div class="page">
        <div class="subpage">Page 1</div>    
    </div>
</div>

的CSS：

 body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    /*width: 210mm;
    min-height: 297mm;*/
    width:297mm;
    min-height:210mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px red solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;        
    }
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

JS：

window.print();

Answer 3

尝试

body {
    margin-top: -1px;
}

这可能不起作用，但这是我最好的猜测。