如何设置HTML页面打印宽高及边距并兼容IE11？

我之前也帮不少开发者解决过类似的问题，尤其是Microsoft Print to PDF和IE11的组合确实有一些 quirks 需要注意。下面是一步步的解决方案，亲测有效：

1. 完善CSS打印规则（兼容IE11） #

首先，你的@page规则写法基本正确，但需要补充IE11专属的属性，同时强制内容适配自定义尺寸，避免溢出导致页面被自动拉伸。这里是完整的CSS代码：

<!-- 先确保文档处于标准模式，这对IE11至关重要 -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        /* 基础样式重置，避免默认边距干扰 */
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 打印专属样式 */
        @media print {
            /* 设置页面尺寸和边距，同时添加IE11支持的-ms-size */
            @page {
                margin: 2px;
                size: 5in 7in; /* 格式：宽度 高度 */
                -ms-size: 5in 7in; /* IE11 专属属性 */
            }

            /* 强制内容严格适配自定义页面尺寸 */
            body {
                width: 5in;
                height: 7in;
                overflow: hidden; /* 隐藏溢出内容，防止页面被拉伸 */
                page-break-inside: avoid; /* 避免内容被意外分页 */
            }

            /* 可选：隐藏不需要打印的元素 */
            .no-print {
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <!-- 你的页面内容 -->
</body>
</html>

关键细节说明： #

• -ms-size属性：IE11对标准size属性支持有限，必须添加这个专属属性才能识别自定义页面尺寸。
• body尺寸锁定：仅仅设置@page还不够，需要把body的宽高强制设为自定义尺寸，确保内容不会超出范围——如果内容溢出，Microsoft Print to PDF会自动切换回Letter尺寸来容纳内容。
• 标准模式声明：必须保留<!DOCTYPE html>和X-UA-Compatible meta标签，否则IE11会进入怪异模式，完全忽略@page规则。

2. 打印对话框的关键设置（容易忽略！） #

即使CSS写对了，Microsoft Print to PDF默认还是会用Letter（8.5x11英寸）尺寸，所以必须手动调整打印设置：

• 按下Ctrl+P打开打印对话框，选择Microsoft Print to PDF作为打印机。
• 点击更多设置，找到纸张尺寸选项：
  • 选择「自定义」，手动输入宽度5英寸，高度7英寸；
  • 确保缩放设置为「无」或「100%」，不要选「适应纸张大小」——这个选项会强制拉伸内容到默认的Letter尺寸，直接覆盖你的CSS设置。
• 最后点击「打印」，导出的PDF就会是你想要的5x7英寸尺寸了。

3. IE11的额外测试要点 #

在IE11中测试时，注意以下几点：

• 清除浏览器缓存，确保最新的CSS生效；
• 按下F12打开开发者工具，切换到「仿真」标签，确认文档模式是「Edge（IE11）」，而不是怪异模式或旧版本IE模式；
• 如果还是有问题，可以尝试给页面最外层容器也设置宽高为5in x7in，进一步确保内容不会溢出。

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