HTML页面打印适配Letter纸张：内容裁切与边框不显示问题排查

我负责的大型项目涉及HTML页面打印功能，目前遇到US Letter纸张适配问题：已明确按Letter尺寸设置页面，浏览器及打印预览显示正常，但实际打印到US Letter纸张时，"Test"文本的顶部和左侧被轻微裁切，且黑色边框未打印出来，请问问题成因是什么？

代码示例 #

CSS代码 #

<style>
/* Reset default margin and padding on body */

@page {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Create a full-screen div */
.full-screen-div {
    width: 8.5in; /* 100% of the viewport width */
    height: 11in; /* 100% of the viewport height */
    Border: solid 5px
    }

.TR{
position:absolute;
margin-top:0;
margin-right:0;
font-size:24px;
}

</style>

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Full-Screen Div</title>
</head>
<body>
    <div class="full-screen-div">
        <!-- Content goes here -->
        <span class='TR'>Test</span>
    </div>
</body>
</html>

问题成因分析 #

• 打印机物理不可打印区域限制：你设置了@page { margin: 0; }，但几乎所有打印机都存在物理层面的不可打印边缘（通常是几毫米范围），你的div完全占满8.5×11in的纸张尺寸，超出了打印机的可打印范围，导致边缘的文本和边框被裁切。
• CSS属性语法错误：.full-screen-div中的Border属性首字母大写，CSS属性名是大小写敏感的，正确写法应为小写的border；同时你未指定边框颜色（仅写了solid 5px），默认情况下边框可能为透明或继承了无颜色的父元素属性，导致边框无法显示。
• 绝对定位的定位规则偏差：.TR类使用position:absolute但未设置top和left属性，仅靠margin-top:0; margin-right:0无法精准控制位置，浏览器预览与实际打印的渲染引擎对未明确定位的绝对元素处理逻辑有差异，导致文本偏移到打印机不可打印区域。
• 未明确指定@page的纸张尺寸：虽然你设置了div的尺寸为US Letter规格，但@page规则中未添加size: letter;声明，部分浏览器可能会 fallback 到默认纸张尺寸的渲染逻辑，导致实际打印时尺寸匹配出现偏差。

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