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

Question

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

问题：

我正在尝试仅使用 table 打印此页面，如图所示，我已将 侧窗格 放入 print-hidden 它一直工作到 Google Chrome 46.0.2490.71 的版本，但在 @media print @media css margin 不工作。

目前我的GoogleChrome版本是48.0.2564.23

侧窗格页面：

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

侧窗格页面打印权限：

没有侧窗格页面：

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

我不明白为什么 chrome 的新版本需要 print-hidden div 的保证金...!!

重要的是它在 chrome 最新更新中不起作用，否则没问题。

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

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

谢谢...

尝试过：

我曾尝试提供负的左边距，但在那种情况下，所有其他浏览器的打印预览都不正确

GitHub 问题：

GitHub Issue

Google Chrome 论坛上的问题：

chrome forum issue

JsFiddle:

fiddle

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

Answer 1

css 中有 2 个问题。

1) 媒体打印应该在最后 2) 你在 display:none.

之后错误地在代码中添加了一个逗号

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

Answer 2

首先检查 fiddle 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;
}
}

Answer 3

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

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

简而言之：禁用打印样式中的所有转换sheet（媒体="print"）在所有元素上应用

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

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

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

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

Print preview margin of print-hidden part in chrome new version

css

printing

google-chrome

print-preview

问题：