div的边框即使在打印时也没有显示？

问题描述

我想用边框打印div，该边框在html页面中可以正常工作，但在打印预览中该边框不显示。

即使我为<div class="sfborder">添加了内联css，这也无法得到正确的输出，我该如何解决呢？

<style>
   .sfborder {
    border: 1px solid black !important;
    border-collapse: collapse !important;
    border-radius: 2px !important;
    margin-bottom: 10px;
    overflow: hidden;
}
    @media print {
      .sfborder {
        border: 1px solid !important;
        border-collapse: collapse !important;
        border-radius: 2px !important;
        margin-bottom: 10px;
        overflow: hidden;
      }
    }
</style>

<div class="row">
  <div class="col-sm-12">
    <div class="sfborder">
      <div class="col-sm-4">
        <h6 class="text-info">Quote to</h6>
        <h6>Kadamba India Technologies PVT LTD</h6>
        <p>'Kasturba Nagar,Mysore Road,Bangalore - 560026</p>
      </div>
      <div class="col-sm-4">
        <h6 class="text-info">Ship To</h6>
        <h6>Kadama India Technologies PVT LTD</h6>
        <p>'Kasturba Nagar,Bangalore - 560026</p>
      </div>
      <div class="col-sm-4">
        <div class="col-sm-12">
          <h6 class="text-info">Delivery Terms</h6>
          <p>Advance</p>
        </div>
        <div class="col-sm-12">
          <h6 class="text-info">Payment Terms</h6>
          <p>Against Delivery</p>
        </div>
        <div class="col-sm-12">
          <h6 class="text-info">Other Reference</h6>
          <p>Shipping charges extra</p>
        </div>
      </div>
    </div>
  </div>
</div>

解决方法

我能问一下为什么您要在CSS中使用@media打印吗？我个人将其保存在同一文件中，还是只将css文件不使用@media打印{ }

<style>
  .sfborder {
     border: 1px solid !important;
     border-collapse: collapse !important;
     border-radius: 2px !important;
     margin-bottom: 10px;
     overflow: hidden;
    }
</style>

您是否尝试过仅保留上面的内容并删除@media印刷品？

您还正确导入了css文件吗？

html printing window