html - CSS 打印和@page 不工作

Question

我有一个简单的 HTML 页面，我有

body, html {
  width: 100%;
  margin: 0;
  padding: 0;
}

@media print {
  @page {
    size: letter portrait;
    padding-left: 5in;
    padding-right: 0.25in;
    padding-top: 1in;
  }
}

但是，当我在 Chrome 中打印预览时，它似乎完全不受影响。我需要做什么才能让 Chrome 识别 @page 和媒体查询？

Answer 1

我认为您不需要媒体查询，因为@page 仅用于打印。

另外，根据:https://developer.mozilla.org/en-US/docs/Web/CSS/@page

You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

也许使用边距代替填充会起作用。