chrome新版打印隐藏部分的打印预览边距答案

【问题标题】：Print preview margin of print-hidden part in chrome new versionchrome新版打印隐藏部分的打印预览边距
【发布时间】：2016-03-24 18:05:42
【问题描述】：

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

问题：

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

目前我的谷歌浏览器版本是48.0.2564.23

侧窗格页面：

新版本的 chrome 显示边距，如打印预览图像所示，此问题仅在 chrome 浏览器中出现，在所有其他浏览器中都可以正常工作

Sidepane Page Print Priview：

没有侧窗格页面：

没有侧窗格页面打印权限：

我不明白为什么新版 chrome 会占用print-hidden div 的边距...！！

重要的是它不能在 chrome 最新更新中运行，否则它很好。

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

有什么问题可以问我的问题。

谢谢...

试过了：

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

GitHub 上的问题：

GitHub Issue

Google Chrome 论坛上的问题：

chrome forum issue

JsFiddle：

fiddle

在 JsFiddle 中，我使用了 css 属性 margin-left，但它在 47 之后无法在 chrome 最新版本中工作，在旧版本中工作正常，直到 Google Chrome 46.0.2490.71 但在下一次更新中它是大的在其他浏览器中出现问题，它像往常一样正常工作......

【问题讨论】：

不确定我是否理解正确。您的意思是“侧窗格”具有“打印隐藏”类，但它在页面上占用空间？检查@print print-hidden 类选择器是否具有“display:none”属性，因为“visibility:hidden”不显示它，而是像渲染一样占用空间。
@miguel-svq 即使我在@media print 中给出margin-left:-200px; 然后它在其他浏览器中的chrome 中也不能正常工作，这@media print 工作正常......！！
请发布您完成的代码或提供演示。
@SagarNaliyapara check this 我签入了 Chrome v 47.0.2526.106 m 并且可以正常工作。
@SagarNaliyapara 你的问题解决了吗？它在 Q 或其他方式上的工作方式如何？

标签： css google-chrome printing print-preview

【解决方案1】：

您使用的主题看起来很花哨，所以我猜测折叠和显示侧边栏涉及过渡。

如果是这样，那么可以在这里找到解决方案：https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/

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

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

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

在您的打印样式中，您将侧边栏的宽度设置为 0px，但 Chrome 在拍摄打印快照时几乎没有开始为宽度设置动画（由于过渡），因此：边距仍然可见！

【讨论】：

【解决方案2】：

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

我做了两件事，

1- 将打印放在底部

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

【讨论】：

工作到 47 版本，但不在 48 beta 的 chrome 中
我编辑了缺少的小提琴; chrom beta 没有人使用...你不能自动更新到它...查看使用w3schools.com/browsers/browsers_chrome.asp 48 它的 beta 有问题，但我的解决方案工作... + 现在专注于 46 它最常用的。
有用的答案，但不是全局解决方案
它不是全球性的，因为他的问题更多是关于他预定义的属性的覆盖

【解决方案3】：

css有2个问题。

1) 媒体打印应该在最后 2）错误地你在代码中添加了逗号显示后：无。

@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important},
#main-container {
    margin-left: 0px!important;
}
}

正确的 CSS 应该是：

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

【讨论】：

工作到 47 版本，但不在 48 beta 的 chrome 中