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

Question

当我尝试打印我的网页时，我无法弄清楚为什么我的按钮样式/颜色会被删除。我正在为我的一些风格使用引导程序。

.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

它与引导程序有关。如果您的引导程序包含打印媒体样式，因为它可能没有以排除它们的方式进行自定义，因此某些样式将被更改。

（Hintergrundgrafiken = 背景图形）

这也很重要，正如您在屏幕截图中所做的那样：
要打印带有颜色和内容的页面，例如在 Firefox 中，您必须通过单击File > Page Setup... > Print background或告诉浏览器Print (icon in the top right menu) > Page Setup... > Print background。

Answer 2

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

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

如果没有，请按照这里

• https://developer.mozilla.org/en-US/docs/Web/Guide/Printing

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Media

• https://www.w3.org/TR/CSS2/media.html#at-media-rule

希望这会以某种方式对您有所帮助（y）。

Answer 3

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

试着把它放在你的样式表media="all"或 media="print"

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