打印时CSS列断开

时间:2011-04-21 02:40:23

标签: html css safari webkit css3

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

5 个答案:

答案 0 :(得分:25)

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

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

答案 1 :(得分: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;
}

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

答案 4 :(得分:-1)

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

  

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