浏览器打印预览不显示CSS背景

Question

我的网站工作正常,但是当我点击文件>浏览器上的打印(浏览器打印预览)时,所有的CSS都会混乱,背景颜色会被白色空格替换而不会在预览页面上获得徽标.

那么我如何创建一个用于打印预览的CSS文件以及当用户点击打印时我如何调用.

Answer 1

你需要提供你的标记,以便你有这个错误...

信息:浏览器默认永不打印background color,您需要在浏览器中启用该选项.

以防您使用

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

比替换它,media=screen, print以便它将规则应用于您的网站以及打印..

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

您还可以使用这样的打印特定样式表:

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

您还可以使用特定于打印的@media查询

@media print {
 /* Whatever */
}

最后但并非最不重要的是在您的浏览器中启用打印:

Firefox:单击alt(如果您的浏览器菜单栏被隐藏) - 文件 - 页面设置 - 勾选打印背景

Chrome:要在Chrome中启用打印,请使用此CSS属性-webkit-print-color-adjust:exact;

Answer 2

创建打印样式表

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

不要在打印版本中显示不必要的元素

Web访问者根据页面上的内容来打印页面，而不是在网站上看到支持的图像。创建一个名为no-print的类，并将该类声明添加到DIVS，图像和其他没有打印值的元素中：

.no-print { 
   display:none; 
}

<!-- Example -->
<div id="navigation" class="no-print">
   <!-- who needs navigation when you're looking at a printed piece? -->
</div>

提示

• 避免使用不必要的HTML表
  当将页面结构困在表中时，控制网站的内容区域将极具挑战性。
• 使用分页符浏览器中的分页符没有Microsoft Word中的分页符可靠，特别是考虑到动态创建的页面上可变的内容长度，但是如果使用得当，则在打印网站时会有所不同。
• 调整页面大小以进行打印显然，您的计算机监视器可以提供大量的宽度来查看页面，但是我建议将内容区域的宽度设置为600px。

大卫·沃尔什（David Walsh）撰写