2

我正在尝试使用@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>

这是我要开始工作的 CSS:

@page {
    margin: 5cm;
}

但是当我尝试打印页面时(右键单击 -> 打印...),打印预览(以及物理打印出来的页面)没有边距。这是为什么?主要浏览器不支持它吗?是不是用错了?

这是完整的代码,为了能够测试,您需要将代码复制到文本文件中并在浏览器中打开: https ://www.w3schools.com/code/tryit.asp?filename=G7HVX8AT56BN

4

0 回答 0