我们的一些网站在使用Google Chrome打印预览时出现问题。这个问题是间歇性的,有时候预览不会渲染所有内容。打印时也存在这个问题。
看起来这是一种重绘问题。我的意思是,尽管当预览最初加载时缺少一些内容,但我可以通过选择或取消选择一些打印选项来解决它。它看起来强制预览窗口重新加载,然后就好了。
当然,这对我们的用户来说并不是真正的解决方案。
我正在使用Windows 10上的chrome 46.0.2490.80 m。另一位同事在使用Windows 8上相同版本的Chrome时遇到了同样的问题。
还有其他人遇到这个问题吗?有人有解决方法吗?
附加信息
- 我们的打印样式表与主样式表分开,并单独链接到文档
- 我们正在使用Bootstrap,它有一些自己的打印样式
- Chrome打印仿真没有这个问题,它只存在于打印预览中。
提前感谢。
编辑: 我被要求提供打印样式表。我想重申,这个问题不是局限于单个网站或环境的。唯一的共同点是Google Chrome 46.0.2490.80 m。
无论如何,以下是打印样式:
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
/*============================================================*\
$Custom element removal
\*============================================================*/
#main-template,
.footer-cols,
.widget-promo,
.testimonials .column-sidebar,
.widget-range,
.tabs-nav,
.tabs-cnt,
.search-option,
.desktop-hidden,
.shopping-cart .sidebar,
.shopping-cart .legal {display: none;visibility: hidden;}
.widget-video,
.widget-gallery,
.testimonial {
width: 50%;
margin: 0 auto;
}
.single-image:after {
content: ""!important;
}
.t-quote {
border:none;
}
.retailers .map {height: 600px;}
.print-logo {display: block;visibility: visible;}
nav {display: none;}
.utilities p {
position: absolute;
left:0;
top: 0;
}
.contact-us {display: none;}