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

我无法弄清为什么当我尝试打印我的网页时，我的按钮样式/颜色被删除。我为我的一些样式使用引导程序。当我尝试在Chrome或Firefox中打印网页时，为什么我的样式被删除？

.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; 
}

来源

2016-12-14 Fawn

它是打印机上的默认设置（bg-colors/bg-image）不打印......以备我猜。只有用户可以改变这一点，样式表没有硬件上的动力:(:) –

@Gyryrillus - 如果你注意到在上面的屏幕截图中选择了这些选项......所以我不知道为什么它仍然会去除颜色？ – Fawn

哦，是的，然后检查'@media print'规则并删除bg被重置的/注释行。否则'@media只是屏幕'，可能涉及，删除'只''将所有样式应用于'all'（包括'print'） –

它与引导做。如果你的引导程序includes print media styles，因为它可能不是customized它排除它们，一些样式会改变。

（Hintergrundgrafiken =背景图形）

此外，这是重要的，因为你已经在你的屏幕截图做正确：
要打印颜色和材料，例如页面在Firefox中，您必须点击File > Page Setup... > Print background或Print (icon in the top right menu) > Page Setup... > Print background来告诉浏览器。

来源

2016-12-14 20:37:52 Marvin

我选择了打印背景，图像和颜色，它仍然显示如上面的屏幕截图:(如果你注意到在上面的屏幕截图中选择了这些选项 – Fawn

已更新我的答案。似乎问题出现在bootstrap媒体样式中。一个最小的本地示例，带有boostrap和一个自定义的boostrap（不包括“打印介质样式”），并且它只适用于我自定义的版本 – Marvin

这解决了我的问题，当我注释掉引导打印样式时，谢谢！ – Fawn

您是否使用@media print用于例如打印这些风格

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

如果没有然后按照这里

希望这会以某种方式帮助你（y）。

来源

2016-12-14 20:12:56 pradeep1991singh

我正在使用打印样式，但我没有将每个按钮样式，链接样式，图像样式等添加到正常styles.css样式表中的打印样式表。我是否必须再次定义每个样式并将其复制到我的打印样式表中？ – Fawn

我只是尝试将我的按钮样式添加到我的print.css样式表中，但它仍然不适用于我。我不确定这里发生了什么事。 – Fawn

它正在被删除，因为CSS样式表的属性被称为media它定义了这个CSS文件将在哪个媒体上工作。

尝试把这个样式表media="all"或媒体=“打印”

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

来源

2016-12-14 20:15:04

你试过这个吗？它不适合我。 – Marvin

您需要在所有包含在html页面中的css文件中写入media =“all”。它确实有效。 –

嘿玛文是否适合你？ –

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

回答

相关问题