Question

我使用twitter-bootstrap作为HTML的主要样式。

我有一个生成的表（来自一个ember应用程序），并且该表的每个单元格都设置了背景颜色以指示某个状态。使用类选择器设置颜色。

这项工作非常适合屏幕，但在打印时我只获得白色背景色，因为bootstrap定义了以下内容：

@media print {
  .table td, .table th {
    background-color: #fff !important;
  }
}

我的HTML看起来像这样：

<table class-"table table-condensed>
   <tr>
     <td class="bg-color1>Content</td>
     <td class="bg-color2>Content</td>
   </tr>
</table>

我的css看起来像这样：

.bg-color1 {
  background-color: #ababab;
}
.bg-color2 {
  background-color: #bababa;
}
@media print {
 .bg-color1 {
   background-color: #ababab;
 }
 .bg-color2 {
   background-color: #bababa;
 }
}

如果我在打印媒体类描述中使用!important，它仍然无效。此外，如果我将以下内容添加到“撤消”引导程序中的第td设置，则它不起作用，因为这优先于我的类设置，因此我仍然无法在打印时获得颜色

@media print {
 .table td, .table th {
   background-color: initial !important;
  }
}

使用bootstrap打印类选择器时似乎无法获得彩色背景。有没有人有这方面的解决方案。

Answer 1

哦，是的，只是发现了一些东西...... CSS有这种令人痛苦的偏好，选择树越大，优先级就越高。

例如， table > td优先于td

在Bootstrap的CSS中，td被选为.table td，但您的选择器只是.bg-color1或.bg-color2

有两种方法可以解决这个问题。

从Bootstrap的CSS中删除!important并将!important保留在CSS中
增加选择器的长度，例如.table .bg-color1

我没有证据证明这一点，但这是我注意到的。

Answer 2

如果用户在其打印设置中关闭了“打印背景颜色和图像”，则没有CSS会覆盖它，因此始终考虑到这一点。这是一个默认设置。一旦设置，它将打印背景颜色和图像，你有什么工作。它可以在不同的地方找到。在IE9beta中，它可以在Paper选项下的Print-＆gt; Page Options中找到。在FireFox中它位于页面设置 - ＆gt; [格式＆amp;选项]选项卡下的选项卡。

可以提供帮助：

body {
  -webkit-print-color-adjust: exact;
}

如何通过我的班级设置停止打印介质的bootstraps表背景颜色设置

2 个答案: