在chrome新版本中打印隐藏部分的预览边距

时间:2015-12-18 04:47:14

标签: css google-chrome printing print-preview

我已经展示了一些显示问题的截图...

问题:

我正在尝试仅使用表格打印此页面,如图所示,打开侧窗格我已将侧窗格放入print-hidden并且它一直工作到版本 Google Chrome 46.0.2490.71 ,但在 @media print css margin中的下次更新后无效。

目前,我的Google Chrome版本为 48.0.2564.23

Sidepane页面:

Image One with sidepane

新版本的chrome显示了打印预览图像中显示的边距,此问题仅在Chrome浏览器中出现,它在所有其他浏览器中正常工作

Sidepane Page Print Priview:

Print Preview with sidepane

没有Sidepane页面:

Image Two without sidepane

没有Sidepane页面打印Priview:

Print Preview without sidepane

我无法理解为什么新版本的chrome需要print-hidden div的余量...... !!

重要的是它不能在Chrome最新更新中使用,否则就可以了。

如果有人在最​​新的chrome更新中发现了打印问题,请告诉我任何人都有解决方案。

您可以询问是否有任何问题需要了解我的问题。

谢谢...

尝试:

我试图给出负左边距但在这种情况下所有其他浏览器的打印预览都不正确

GitHub问题:

GitHub Issue

Google Chrome论坛上的问题:

chrome forum issue

的jsfiddle:

fiddle

在JsFiddle中,我使用过css属性margin-left,但是在47版之后,它在旧版本中工作得很好,直到 Google Chrome 46.0.2490.71 ,但在下次更新时这是其他浏览器中的一个大问题,它像往常一样非常顺利地工作......

2 个答案:

答案 0 :(得分:4)

首先检查小提琴 https://jsfiddle.net/ceh185bw/11/

我做了两件事,

1-将打印件放在botom

2-超过集装箱边距

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
    border: 3px solid;
}
#main-container {
    margin-left: 200px!important;
    border: 3px solid;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{
    display:none !important;
}
#main-container {
margin-left: 0px!important;
border:1px solid;
border: 3px solid;
}
#main-container {
    margin-left: 0px!important;
}
}

答案 1 :(得分:0)

您使用的主题看起来很花哨,所以我猜测折叠和显示侧边栏会有一个过渡。

如果是这种情况,则可以在此处找到解决方案:https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/

简而言之:禁用所有元素的打印样式表(media =“print”)中的所有过渡

* {
  -webkit-transition: none !important;
  transition: none !important;
}

...或将其包装在常规样式表中的“@media print”中。

在您的打印样式中,您将侧边栏的宽度设置为0px,但Chrome在拍摄打印快照时几乎没有开始设置宽度(由于转换),因此:仍然可以看到边距!