当我尝试在 Chrome 或 Firefox 中打印网页时，为什么我的样式被删除了？

Question

我无法弄清楚为什么当我尝试打印我的网页时我的按钮 styles/colors 被删除了。我对我的一些样式使用 bootstrap。

.button.primary {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 18px;
    line-height: 1.8rem;
    background-color: #EEB111;
    color: #FFF;
    font-weight: 600;
    text-decoration: none;
    outline: 0;
}

Answer 1

您是否使用 @media print 打印这些样式，例如

@media print {
  body { font-size: 10pt }
}

如果没有，请点击这里

希望这对您有所帮助 (y)。

Answer 2

它被删除是因为 css-stylesheets 具有称为 media 的属性，它定义了此 css 文件将在哪些媒体中工作。

试着把这个放在你的风格上 sheet media="all" 或 media="print"

<link rel="stylesheet" type="text/css" media="print" href="print.css">

Answer 3

与bootstrap有关。如果您的 bootstrap includes print media styles, because it might be not customized 以某种方式将它们排除在外，某些样式将会更改。

（Hintergrundgrafiken = 背景图形）

这也很重要，因为您在屏幕截图中已经正确地做到了：
要打印带有颜色和内容的页面，例如在 Firefox 中，您必须通过单击 File > Page Setup... > Print background 或 Print (icon in the top right menu) > Page Setup... > Print background.

来告诉浏览器

当我尝试在 Chrome 或 Firefox 中打印网页时，为什么我的样式被删除了？

Why are my styles getting removed when I try to print a webpage in Chrome or Firefox?

css

printing

print-css

twitter-bootstrap