CSS 列在打印时被破坏
.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 列变成跨越多个页面的单列。有什么想法吗？
.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;
}
So it works perfectly in Safari, but when printing, the 4 columns turn into a single column spanning multiple pages. Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
似乎 Webkit 中的列开发人员（Dave Hyatt）在打印时禁用了列，因为他无法正确实现分页： https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854
我很惊讶5年多了，一直没有找到解决办法……
It seems like the developer of columns in Webkit (Dave Hyatt) disabled columns when printing, because he couldn't implement page breaking properly: https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854
I'm surprised that in more than 5 years, no solution has been found...
值得注意的是，在 OSX 上的 Firefox 31.0 中，这些确实可以使用以下样式正确打印。然而它在 WebKit (safari/chrome) 中仍然被破坏。
It's worth noting that in Firefox 31.0 on OSX these do print correctly with the below style. However it's still broken in WebKit (safari/chrome).
它不适用于 Chrome、Firefox。你只有一个临时解决方案。使用IE进行多栏打印
It's not working in chrome, firefox. you have only one temporary solution. use IE for multi column print
按列打印的唯一方法是使用 FireFox 或 IE 打印...并使用无浏览器前缀的版本，以便 FF 和 IE 可以读取列 CSS
The only way to print in columns is to print with FireFox or IE... and use the un-browser prefixed versions so that FF nad IE can read the columns CSS
印刷版和网页是两个不同的东西。所以尝试对打印页面使用 diff css 并尝试查看
the print and web page are 2 different things. So try to use diff css for print pages and try to see