为什么Bootstrap 4的CSS在打印发票页面时边框消失？-css教程-PHP中文网

边框消失不是css没加载，而是浏览器在@media print下主动禁用background和border；需在打印媒体查询中用!important显式重写边框样式，并启用-webkit-print-color-adjust: exact强制输出颜色。

为什么bootstrap 4的css在打印发票页面时边框消失？

边框消失不是CSS没加载，是浏览器主动禁用 background 和 border

Chrome、Edge 等主流浏览器在 @media print 下默认关闭“背景图形”（Background Graphics），background-color、border（尤其是带颜色的）都会被忽略——哪怕你在屏幕样式里写了 border: 1px solid #000，打印预览里也大概率看不见。

这不是 Bootstrap 4 的 bug，而是浏览器出于省墨/清晰度考虑的强制策略。你检查打印预览的 DevTools，会发现 border 声明虽然存在，但 computed 样式里 border-top-width 是 0px，border-color 是 rgba(0, 0, 0, 0)。

别依赖浏览器设置里的“打印背景图形”勾选——它不可控，用户可能关掉，且 Safari 不支持该选项
Bootstrap 4 的 .table-bordered、.card、.border 类全靠 border 属性实现，打印时自然失效
box-shadow、background-image 同理，一律不生效，无需尝试修复

必须用 `!important` 显式重写 `border` 并启用 `print-color-adjust`

解决方法不是“加更多类”，而是在 @media print 中覆盖所有关键边框，并强制启用颜色输出：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .table th,
  .table td,
  .card,
  .border {
    border: 1px solid #000 !important;
  }
  /* 避免表格边框双重叠加 */
  .table {
    border-collapse: collapse !important;
  }
}

-webkit-print-color-adjust: exact 是 Chrome/Edge/Safari 必须项，否则 border-color 仍可能被降为灰度或透明
只写 border: 1px solid black 不够，必须带 !important，否则 Bootstrap 4 自带的 @media print 规则（如清空边框）会覆盖你
border-collapse: collapse 要显式声明，否则 .table-bordered 在打印中退化为分离边框，视觉上变粗或错位

发票场景下，别用 `background-color` 模拟边框

很多开发者为“兼容性”改用 div + background-color 画分割线或边框条，这在打印中彻底失效——background 类属性在 @media print 下默认被清空，且无法通过 CSS 恢复。

把所有 background-color: #eee 的分隔线，替换成 border-bottom: 1px solid #ccc
发票金额栏、表头底边等关键对齐线，必须用 border，不能妥协
如果用了第三方组件（如 bootstrap-table），检查其生成的 tr、td 是否包裹在 div 里并施加了 background —— 这类结构要手动 patch