PrintThis 在按下按钮时覆盖自定义 CSS答案

【问题标题】：PrintThis override custom CSS when pressing buttonPrintThis 在按下按钮时覆盖自定义 CSS
【发布时间】：2015-04-01 15:02:46
【问题描述】：

我使用 PrintThis Jquery 插件。
我使用 Bootstrap 作为我的框架。

使用 PrintThis 打印时，我想减小字体大小。
我刚刚在文档中进行了样式更改。像这样：

<style>
body {
    font-size: 8px;
    line-height: 1.42857143;
}
</style>

页面首次加载时。所有文字均为 8 像素。
但是当我按下 PrintThis 按钮时，页面会重新加载/将所有文本更改为 Bootstrap 默认的 14 像素。这是为什么呢？

打印按钮的 HTML

<button class="btn btn-default pull-right" id="print_btn"><span class="glyphicon glyphicon-print" title="Print"></span></button>

用于 printThis 的 JS

<script>
$(document).ready(function () {
    $('#print_btn').click(function () {
      $('#usr_name, #list_usr_time, #sum_worked_time,  #break_page').printThis();
    });
});
</script>

更新我将样式从页面移到了 CSS 文件中。
然后我将 css 文件加载到页面中。
我还向自定义 Jquery 添加了：loadCSS: "css/custom_printthis.css"。
结果是，页面不会覆盖 css。文字是8px，正如我想要的。但是，当我按打印时，预览会在表格标签内显示 14px 文本......而在外部显示 8px 文本。也许我需要在我的 css 中添加“table.tex”...

【问题讨论】：

你能创建一个小提琴或引导重现这个问题吗？
@Ted 我会试试的。我使用 php 来填充我打印的表格。但我会尝试设置一个！
@Ted 这是一个小提琴。但是 print btn 在小提琴中根本不起作用？！ jsfiddle.net/kv5eeak7
@Ted 当我研究 Chrome 中的“网络”控制台时。我可以看到，当我按下“print btn”时，页面会重新加载，并且所有脚本都会这样做。但不知何故，我在该页面中的“样式”没有加载它.. PrintThis 必须跳过该自定义样式，在所有 html 之前添加。可能是因为“样式”不在某些“头部”标签中吗？！

标签： jquery html css twitter-bootstrap printthis

【解决方案1】：

为了解决这个问题，我为 php 打印的所有文本创建了一个新类。
然后我为该类创建了一个 CSS 文件，并覆盖了 Bootstrap 的原始字体大小。

<td class="table_text">Text</td>

.table_text{
    font-size: 10px;
}

【讨论】：