自定义CSS圆形span元素在Chromium打印时不显示的问题

问题原因 #

• Chromium默认打印配置会禁用背景图形渲染，导致background-color这类背景样式无法在打印/PDF中显示
• 空的<span>元素在打印渲染流程中，可能被浏览器判定为无内容元素而自动忽略

解决方法 #

1. 用户端临时方案（需手动设置）

打开打印预览（快捷键Ctrl+P），展开「更多设置」面板，勾选「背景图形」选项，即可让背景色正常打印。但这需要用户手动操作，无法通过代码控制。

2. 代码层面通用方案（无需用户改设置）

通过CSS强制开启打印背景，并确保元素不被浏览器优化移除：

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  /* 添加透明边框，避免空元素被忽略 */
  border: 1px solid transparent;
}

@media print {
  .dot {
    /* 强制Chromium打印背景色 */
    -webkit-print-color-adjust: exact;
    /* 标准属性，兼容更多浏览器 */
    print-color-adjust: exact;
    /* 锁定最小尺寸，防止渲染时被压缩 */
    min-height: 25px;
    min-width: 25px;
  }
}

另外，也可以给空的<span>添加一个不可见占位内容，避免浏览器判定为空元素：

<span class="dot">&nbsp;</span>

原理说明 #

-webkit-print-color-adjust: exact是Chromium内核专属属性，用于强制浏览器打印背景样式；print-color-adjust是W3C标准属性，适配更多现代浏览器。添加边框、占位内容或最小尺寸，都是为了让打印渲染引擎识别到该元素是有实际布局意义的，不会被自动移除。

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