Bootstrap下划线打印失效求助：网页正常显示但打印无下划线

我遇到如下问题：网页中使用Bootstrap的text-decoration-underline类设置的下划线能正常显示，但打印时这些下划线全部消失；而通过行内样式style="text-decoration: underline !important;"设置的手机号字段，打印时下划线依然存在。

对应的代码如下：

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Dispatch Note</title>
  <link  href="/ocadmin-asset/stylesheet/bootstrap.css" rel="stylesheet" media="screen"/>
  <link  href="/ocadmin-asset/stylesheet/fonts/fontawesome/css/all.min.css" rel="stylesheet" type="text/css"/>
  <script src="/ocadmin-asset/javascript/jquery/jquery-3.6.0.min.js" type="text/javascript"></script>
  <script src="/ocadmin-asset/javascript/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-print-css/css/bootstrap-print.min.css" media="print">

<style>
@media print {
    @page {
      size: A4;
      margin: 0;
    }
}
</style>
</head>
<body>
<div class="container" style="border: thin solid black;padding:0%">
<table class="table table-bordered" style="width:100%">
  <tr>
    <td>
      Delivery Date<span class="text-decoration-underline">2022-01-01</span>
      &nbsp;&nbsp;Day of week：<span class="text-decoration-underline">Wednesday</span>
      &nbsp;&nbsp;Time：<span class="text-decoration-underline">12:30</span>
      &nbsp;&nbsp;Name：<span class="text-decoration-underline">Adam Smith</span>
      &nbsp;&nbsp;Mobile：<span style="text-decoration: underline !important;">0912-345678</span>
    </td>
  </tr>
</table> 
</div>
</body>
</html>

Chrome浏览器中的表现：

• 网页端：所有带下划线设置的字段均正常显示下划线
• 打印预览/打印时：仅手机号字段保留下划线，其余使用text-decoration-underline类的字段下划线消失

这是否意味着Bootstrap无法用于打印场景？

解答 #

不是Bootstrap本身不适用于打印场景，问题根源在于你引入的bootstrap-print-css第三方打印样式库。

这个库的打印样式中可能重置了text-decoration属性，覆盖了Bootstrap的text-decoration-underline类样式。另外你加载Bootstrap主样式时指定了media="screen"，意味着它仅在屏幕场景生效，打印时bootstrap-print-css的样式优先级更高，导致下划线被移除。而手机号的行内样式带!important，优先级高于第三方库的样式，所以能保留。

可以通过以下方式解决：

• 自定义打印样式，强制保留下划线：

@media print {
    .text-decoration-underline {
        text-decoration: underline !important;
    }
}

将这段样式放在bootstrap-print-css之后加载，确保优先级更高。

• 移除bootstrap-print-css，自行编写打印样式，避免第三方库的样式冲突。

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