Javascript CSS@页边距不适用于打印预览或物理打印页

Javascript CSS@页边距不适用于打印预览或物理打印页,javascript,html,css,sass,css-paged-media,Javascript,Html,Css,Sass,Css Paged Media,我正在试验@page样式,并试图让它们工作,但即使在最简单的用例中,我也无法做到这一点。我有一个简单的HTML页面,其中包含一些段落: <div id="content"> <div id="pageFooter">Page </div> <p class="text">Sed a dolor justo. Praesent in ipsum erat, vitae auctor ante. Praesent nunc augue, interd

我正在试验@page样式,并试图让它们工作,但即使在最简单的用例中,我也无法做到这一点。我有一个简单的HTML页面,其中包含一些段落:

<div id="content">
<div id="pageFooter">Page </div>

<p class="text">Sed a dolor justo. Praesent in ipsum erat, vitae auctor ante. Praesent nunc augue, interdum sed lobortis id, hendrerit quis odio. Nulla interdum velit quis mauris egestas ut bibendum arcu malesuada. Pellentesque eget felis elit. Quisque id eros libero. Duis at commodo urna. Duis auctor bibendum ipsum vel pulvinar. Phasellus ac nisl felis, ut tempor libero. Nullam auctor ultrices ornare. Donec at dolor ornare leo convallis porttitor. Fusce sed erat vitae risus rutrum interdum nec nec felis. Curabitur porttitor pretium mi, non luctus est pharetra vitae.</p>

<p class="text">Aliquam vestibulum sapien vulputate tortor mattis cursus. Suspendisse et leo at nulla pulvinar fringilla. Fusce condimentum pretium porta. Duis magna est, fringilla eget lacinia et, ullamcorper vitae erat. Praesent vel orci felis. Nunc dignissim ornare odio, nec vestibulum nunc hendrerit eu. Aliquam erat volutpat. Aenean dolor justo, volutpat faucibus semper ut, volutpat sit amet dolor. Proin gravida facilisis elit quis laoreet. Sed sed nulla in metus interdum vestibulum. Aenean nec elit enim, vitae volutpat ipsum. Nunc malesuada, metus at ornare rhoncus, massa metus viverra nulla, vel sodales quam risus id tortor. Morbi venenatis arcu faucibus tortor sollicitudin mollis. Nam porta euismod turpis. Nam a arcu quis mauris malesuada dapibus sit amet quis purus. Donec et lectus tellus, id cursus purus.</p>

<div class="resetCounter"></div>

<p class="text">Praesent eu nisi quis odio eleifend lacinia. Fusce gravida nibh et urna placerat at viverra risus pulvinar. Suspendisse auctor, ante ut suscipit ullamcorper, dolor dolor posuere lacus, a aliquet orci dui et lorem. Donec vel tempus mi. Etiam ornare nulla et ipsum facilisis nec tempor orci luctus. Ut cursus sollicitudin semper. Ut facilisis pulvinar ligula, sed mollis diam aliquet venenatis. Curabitur lobortis, ipsum ac placerat dictum, enim purus rhoncus arcu, in accumsan nisi lectus id libero. Vivamus ultricies adipiscing fermentum. Nam sed risus magna. Vestibulum rutrum massa eu ante tincidunt ultrices. Praesent ut ante purus. Mauris tincidunt ornare lacus, et varius dolor lacinia eu.</p>

<p class="text">Sed vel euismod velit. Nulla vitae ligula metus, id tincidunt arcu. Nulla vel nulla sed risus sodales commodo. Donec congue dapibus massa, eget semper magna placerat vel. Curabitur congue mauris eget dolor tincidunt gravida. Suspendisse at odio orci, ut ultricies augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam orci orci, iaculis ut feugiat non, tincidunt quis nunc. In hac habitasse platea dictumst. Aliquam egestas lacus nec nibh elementum consectetur. Etiam vitae ipsum at ipsum imperdiet vestibulum nec et metus. Donec pulvinar bibendum erat sit amet cursus. Donec iaculis pharetra dui ac venenatis. Nam vel tellus sapien. Phasellus in lectus nec nunc aliquam ullamcorper at id dui.</p>
</div>
但是当我尝试打印页面时(右键单击->打印…),打印预览(以及物理打印出来的页面)没有边距。为什么呢?主要浏览器是否不支持它?我用错了吗

以下是完整的代码,为了能够进行测试,您需要将代码复制到文本文件中,然后在浏览器中打开:

我尝试将您的代码粘贴到一个空白文档中,当我使用Chrome 76打开“打印”对话框(打印预览)时,页边距似乎可以正常工作。我还尝试通过devtools(模拟CSS媒体)预览打印样式,但浏览器中不会显示边距。我尝试将代码粘贴到空白文档中,当我使用Chrome 76打开打印对话框(打印预览)时,边距似乎能按预期工作。我还尝试通过devtools(模拟CSS媒体)预览打印样式,但浏览器中不会呈现边距。
@page {
    margin: 5cm;
}