CSS：隐藏的元素仍然占用空间在打印输出

Question

我用css来

仅打印页面的部分：

body { 
visibility:hidden; 
    } 
    .print { 
    visibility:visible; 
    background-color: white; 
    margin: 0; 
    } 

我想打印才能正确隐藏在打印元件上方的部分输出，但它仍占用空间的面积。我通过制作一个长长的单词列表来测试这一点。在打印输出中，出现空白区域相同的空白区域，然后出现元素输出。此问题仅出现在Chrome和Mozilla上。我也测试了浏览器的保证金选项，这不是问题。

任何想法？

Answer 1

想要display:none不是visibility:hidden。后者使元素不可见，但不会将其从文档流中移除。

Answer 2

使用display:none;

Answer 3

尝试使用display: none;代替。

Answer 4

使用display：none;因为您只想显示打印和身体的任何部分。

Answer 5

使用@media进行打印。例如：

@media print { 
    * {display: none;} /*or if you want only the body*/ body {display: none;} 
    .print {display: block;} 
} 

（只是粗略的例子的实际的样式表应该包括一个网页，而不是通配符的所有元件）

然后打印时样式表只用于，或打印预览。

Answer 6

即使visibility:collapse;做到了！ :)

Answer 7

如果我们想要display:inline-block或display:block伴随着可见性隐藏。

然后我们可以使用follwing css作为解决方法。

{ 
    visibility:hidden 
    width:0px; 
    height:0px 
}