打印时 CSS 列中断答案

【问题标题】：CSS columns breaking when printing打印时 CSS 列中断
【发布时间】：2015-10-06 08:18:50
【问题描述】：

.class {    -webkit-column-count: 4;
    -webkit-column-gap: 0.25in;
    -webkit-column-rule-width : 1px;
    -webkit-column-rule-style : solid;
    -webkit-column-rule-color : #eee;
}

所以它在 Safari 中完美运行，但是在打印时，4 列变成了跨越多个页面的单列。有什么想法吗？

【问题讨论】：

这很令人沮丧。我已经研究了几个小时的解决方案，看起来我必须完全采取不同的路线。 WebKit 实现（包括我刚刚检查过的最新版本、Chrome 和 wkhtmltopdf）关闭了 CSS3 列（参见彼得的回答）。 Firefox 实际上正确地呈现了它们，但我不知道如何以编程方式有效地访问它:-( 糟糕的时代。
相关 Chromium 错误：code.google.com/p/chromium/issues/detail?id=99358

标签： html safari webkit css

【解决方案1】：

似乎 Webkit 中的列开发人员 (Dave Hyatt) 在打印时禁用了列，因为他无法正确实现分页：https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854

令我惊讶的是，在 5 年多的时间里，还没有找到解决方案......

【讨论】：

这很有趣，因为我遇到了一个类似的问题，我最终必须将其作为自定义解决方案实施。很烦人，还没有解决方案。
在对话中似乎开发人员表示已修复，但我仍然看到问题。
最近在 chome 中修复了这个错误 - bugs.chromium.org/p/chromium/issues/detail?id=99358
这是在 Chrome 中修复的，而不是在 Safari 中。
在 Safari 中已修复，但是当我尝试在 iOS WKWebView 上打印时，错误再次出现

【解决方案2】：

值得注意的是，在 OSX 上的 Firefox 31.0 中，这些确实使用以下样式正确打印。但是它在 WebKit (safari/chrome) 中仍然存在问题。

.column_wrapper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

【讨论】：

【解决方案3】：

它在 chrome、firefox 中不起作用。你只有一个临时解决方案。使用IE进行多列打印

【讨论】：

在 Firefox 中就像一个魅力。

【解决方案4】：

在列中打印的唯一方法是使用 FireFox 或 IE 打印...并使用非浏览器前缀版本，以便 FF nad IE 可以读取列 CSS

【讨论】：

【解决方案5】：

打印和网页是两个不同的东西。所以尝试使用 diff css 打印页面并尝试查看

分页css属性。它会派上用场

【讨论】：

如果有帖子和例子就好了！