如何将Div内容按3×5英寸索引卡尺寸打印在Letter纸？

需求是将页面指定Div内容以3×5英寸的尺寸打印在Letter规格纸张上（转换后3英寸=288px，5英寸=480px），但使用@media print规则后，打印预览及实际输出的尺寸远小于设定值。尝试修改@page的size属性为3in 5in、288px 480px等均无效。

附简化版Razor Page HTML及CSS代码：

原HTML代码 #

@page
@model ExampleProject.Pages.IndexCardModel
@{ 
    ViewData["Title"] = "Index Card Print-Out";
    ViewData["ContentBGColor"] = "#FFF";
}


<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>INDEX CARD EXAMPLE</title>

    <link href="~/css/indexcard.css" rel="stylesheet" />

</head>
<body>

    <div class="indexcard-config-3x5-portrait" id="section-to-print">

        <h3 class="indexcard-title">HEADER</h3>

        <div class="ic-table">
            <label>Form Here</label>
        </div>

        <div class="ic-table">
            <label>Table Here</label>
        </div>

        <div class="footer">
            <label class="footer">&#x2610; Notes on back &#x2192;</label>
        </div>

    </div>

</body>
</html>

原CSS代码 #

:root {
    --background-color: #FFF;
    --font-color: #000;
    --font-type: Calibri;
    --font-size: .75rem;
}

label {
    font-weight: 500;
    margin-top: .5rem;
    font-size: var(--font-size);
    align-self: end;
}

h3 {
    justify-self: center;
    grid-area: header;
    text-align: center;
    background-color: var(--font-color);
    color: var(--background-color);
    padding: .25rem 0;
    letter-spacing: .65rem;
    font-size: calc(var(--font-size)+.5rem);
}

.indexcard-config-3x5-portrait {
    width: 288px;
    height: 480px;
    padding: .25rem;
    border: 1px solid var(--font-color);
    background-color: var(--background-color);
}

.ic-table {
    margin: .5rem;
    width: 2.75in;
    height: 2in;
    border: 1px solid #000;
    align-content: center;
    text-align: center;
    background-color: #ffec86;
    color: #00F;
}

.footer {
    float: right;
    font-size: 1rem;
    margin: 0 .5rem 0 0;
}


@media print {
    @page {
        size: letter;
    }

    body {
        visibility: hidden;
    }

    #section-to-print {
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 288px; /* I've also tried width: 3in; */
        height: 480px; /* I've also tried width: 5in; */
    }
 }

问题根源在于浏览器打印默认的边距、缩放规则，以及visibility属性导致的布局残留。以下是修正步骤：

1. 重置打印页面的边距和缩放
   在@page中添加边距重置，避免浏览器默认边距挤压内容；同时强制禁止缩放。

2. 替换visibility: hidden为display: none
visibility: hidden会保留元素占位，导致目标Div的绝对定位仍受原布局影响，改用display: none彻底隐藏非打印内容。

3. 用英寸单位明确目标元素尺寸
   打印场景下英寸单位比像素更可靠，直接使用3in和5in定义尺寸，避免像素转换误差。

4. 调整目标元素的定位与居中（可选）
   如果需要将索引卡居中打印在Letter纸上，可通过@page的边距计算或目标元素的定位实现。

修改后的CSS代码 #

:root {
    --background-color: #FFF;
    --font-color: #000;
    --font-type: Calibri;
    --font-size: .75rem;
}

label {
    font-weight: 500;
    margin-top: .5rem;
    font-size: var(--font-size);
    align-self: end;
}

h3 {
    justify-self: center;
    grid-area: header;
    text-align: center;
    background-color: var(--font-color);
    color: var(--background-color);
    padding: .25rem 0;
    letter-spacing: .65rem;
    font-size: calc(var(--font-size) + .5rem);
}

.indexcard-config-3x5-portrait {
    width: 3in; /* 直接用英寸单位 */
    height: 5in;
    padding: .25rem;
    border: 1px solid var(--font-color);
    background-color: var(--background-color);
    box-sizing: border-box; /* 包含padding和border到尺寸内 */
}

.ic-table {
    margin: .5rem;
    width: 2.75in;
    height: 2in;
    border: 1px solid #000;
    align-content: center;
    text-align: center;
    background-color: #ffec86;
    color: #00F;
}

.footer {
    float: right;
    font-size: 1rem;
    margin: 0 .5rem 0 0;
}


@media print {
    @page {
        size: letter;
        margin: 0; /* 重置页面边距 */
    }

    body * {
        display: none !important; /* 隐藏所有非打印内容 */
    }

    #section-to-print,
    #section-to-print * {
        display: block !important; /* 强制显示目标元素及其子元素 */
        position: fixed; /* 固定定位确保占满指定尺寸 */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* 居中到Letter纸 */
        width: 3in;
        height: 5in;
        box-sizing: border-box;
    }
 }

关键说明 #

• box-sizing: border-box确保元素的padding和border不会超出设定的3×5英寸尺寸。
• position: fixed配合transform: translate(-50%, -50%)实现索引卡在Letter纸上的居中打印，若不需要居中可改为left: 0; top: 0; transform: none;。
• 打印前需在浏览器打印设置中关闭**"缩放以适应"**选项，确保尺寸准确。

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