@page规则的top-left、top-right样式在Chrome、Edge中失效，如何修复？

你的代码语法完全符合W3C的CSS Page 3规范，问题出在Chrome和Edge目前对@page规则中的页边距盒（比如@top-left、@top-right）支持不完善，属于浏览器兼容性问题，不是你操作有误。

下面给两种可行的解决方法：

方法一：用固定定位模拟页眉（兼容性好） #

利用打印场景下的fixed定位元素，手动模拟页眉和页码，这种方式所有现代浏览器都支持：

<!DOCTYPE html>
<html>
<head>
    <title>Print Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            /* 给页眉留出足够空间，避免内容被遮挡 */
            margin: 2in 1in 1in 1in;
        }

        @media print {
            /* 只在打印时显示页眉 */
            .header {
                position: fixed;
                top: 0.5in;
                font-size: 14px;
            }
            .header-left {
                left: 1in;
            }
            .header-right {
                right: 1in;
            }
        }

        /* 屏幕浏览时隐藏页眉 */
        @media screen {
            .header {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="header header-left">Hamlet</div>
    <div class="header header-right">Page <span class="page-num"></span></div>

    <h1>Hamlet - Sample Page</h1>
    <p>
        Hamlet is one of William Shakespeare's most famous plays.
        This is a sample page to demonstrate the header and page number.
    </p>
    <!-- 复制多个段落可测试多页效果 -->
    <p>...</p>

    <script>
        // 打印前生成页码（多页场景需额外逻辑处理）
        window.addEventListener('beforeprint', () => {
            const pageNums = document.querySelectorAll('.page-num');
            pageNums.forEach(el => el.textContent = '1');
        });
    </script>
</body>
</html>

方法二：用Paged.js实现完整的CSS Paged Media支持 #

如果需要复杂的分页布局、自动页码计算，推荐使用Paged.js——它是CSS Paged Media规范的polyfill，能让Chrome、Edge等浏览器完整支持@page的所有特性，包括页边距盒和计数器：

<!DOCTYPE html>
<html>
<head>
    <title>Print Example</title>
    <style>
        @page {
            size: 8.5in 11in;
            margin: 10%;

            @top-left {
                content: "Hamlet";
            }
            @top-right {
                content: "Page " counter(page);
            }
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>Hamlet - Sample Page</h1>
    <p>
        Hamlet is one of William Shakespeare's most famous plays.
        This is a sample page to demonstrate the header and page number.
    </p>
    <!-- 多页测试内容 -->
    <p>...</p>

    <!-- 引入Paged.js polyfill（下载后本地引入） -->
    <script src="paged.polyfill.js"></script>
</body>
</html>

引入Paged.js后，你的原始@page代码就能直接生效，它会自动处理分页、页码计数和页眉渲染。

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