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 
}