HTML预览显示异常，添加页眉页脚后显示不符合预期，是什么原因？

以下是这类问题的常见诱因，你可以对应自己的代码逐一排查：

• 媒体查询适配缺失：如果是打印场景下的页眉页脚，没有单独编写@media print对应的样式规则，屏幕端和打印端的渲染逻辑差异会直接导致显示异常。
• 固定定位未预留空间：页眉页脚如果使用position: fixed固定定位，正文没有设置对应的padding-top和padding-bottom留出容纳页眉页脚的位置，就会出现内容重叠、遮挡的问题。
• 单位适配错误：使用px作为尺寸单位时，不同设备的显示DPI、预览缩放比例都会影响最终排版效果，打印场景下建议使用cm、mm这类物理单位。
• 浏览器默认打印样式干扰：浏览器自带的默认打印边距、系统级页眉页脚配置会覆盖你写的样式，可以用以下CSS重置默认打印配置：

/* 重置打印页面默认参数 */
@page {
  margin: 0;
  size: A4 portrait; /* 按实际需求设置纸张尺寸和方向 */
}
/* 给正文预留边距，数值对应页眉、页脚的高度 */
body {
  padding: 2.5cm 1.5cm;
  box-sizing: border-box;
}
/* 页眉样式示例 */
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2cm;
}
/* 页脚样式示例 */
.page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2cm;
}

• 内部元素排版问题：页眉页脚内部的子元素如果设置了浮动没有清除，会导致父容器高度塌陷，也会触发排版错乱。

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