浏览器打印页边距（右上/右下）文本修改问题：@page属性不生效

你的@page规则无法生效，主要出在浏览器兼容性限制和代码细节缺失这两个方面，以下是具体的修复方案：

1. 修复代码本身的潜在问题 #

首先重置页面根元素的默认边距与内边距，避免覆盖@page的设置：

html, body {
  margin: 0;
  padding: 0;
}

然后调整@page规则，确保内容能被浏览器正确解析（如果需要显示页码，要使用计数器语法；固定文本也建议补充基础样式提升可见性）：

@page {
  margin: 50px;

  @top-right {
    content: "My custom content";
    background-color: red;
    color: #fff; /* 增加文字颜色，避免和背景融合 */
    padding: 2px 6px;
  }

  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    /* 如果仅需固定文本，写 content: "MY PAGE COUNT"; 即可 */
  }
}

2. 开启Chromium浏览器的实验性支持 #

Chrome、Edge等基于Chromium的浏览器默认不启用@page区域伪元素（@top-right、@bottom-right等）的支持，需要手动开启：

• 在浏览器地址栏输入 chrome://flags/#enable-experimental-web-platform-features
• 将该选项设置为Enabled，重启浏览器后再测试打印预览

3. 验证浏览器兼容性 #

不同浏览器对@page区域伪元素的支持度不同：

• Firefox：部分支持，无需额外设置
• Safari：支持有限，部分区域伪元素可能无法正常显示
• Chromium系浏览器：需开启上述实验性功能

完成以上步骤后，重新打开打印预览即可看到自定义的页边距内容。

内容的提问来源于stack exchange，提问作者Rajika Imal