CSS：@media print & column-count根本不工作

Question

我有一个带有三个垂直div的div。在这些内部div中，有一些带有column-count CSS属性的div(如下所示)。

工作部分是这样的(对于多个sreen尺寸)作为示例：

@media only screen and (min-width: 1100px) {
.masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
}

有人能告诉我为什么当我尝试打印页面时，以下代码不起作用吗？

@media print {
.masonry {
    -moz-column-count: 2 !important;
    -webkit-column-count: 2 !important;
    column-count: 2 !important;
}
}

@media print查询正在使用

@media print {
    body {
    display: none;
    }
}

例如。

我在Mac上试用了Safari和FF。

谢谢!

Answer 1

这是Chrome中的一个已知错误

https://code.google.com/p/chromium/issues/detail?id=99358

此链接对您很有用：

CSS columns breaking when printing

这是一个用户尝试的小参考：

http://blog.pdark.de/2010/11/19/printing-web-pages/

祝好运