Question

.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列会变成跨越多个页面的单个列。有什么想法吗？

Answer 1

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

我很惊讶，在5年多的时间里，没有找到任何解决方案......

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

Answer 3

它不适用于chrome，firefox。你只有一个临时解决方案。使用IE进行多列打印

Answer 4

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

Answer 5

打印和网页是两个不同的东西。因此，尝试将diff css用于打印页面并尝试查看

page-break css属性。它会派上用场的

打印时CSS列断开

5 个答案: