CSS: elementi nascosti ancora occupa spazio sul risultato di stampa

Question

sto usando CSS per stampare solo una parte di una pagina:

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

La sezione sopra l'elemento che voglio stampare viene adeguatamente nascosti nella stampa uscita, tuttavia occupa ancora l'area dello spazio. Ho provato questo facendo una lunga lista verticale di parole. Nell'output di stampa si verifica la stessa area di spazio bianco senza le parole e quindi si verifica l'output dell'elemento. Questo problema si verifica solo su Chrome e Mozilla. Ho anche testato le opzioni di margine del browser e non è questo il problema.

Qualche idea?

Answer 1

Si desidera display:none non visibility:hidden. Quest'ultimo rende invisibile l'elemento, ma non lo rimuove dal flusso del documento.

Answer 2

Usa display:none;

Answer 3

Provate ad usare display: none; invece.

Answer 4

display uso: nessuno; come si desidera visualizzare solo la stampa e nessuna parte del corpo.

Answer 5

Utilizzare @media per la stampa. Per esempio:

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

(. Solo un esempio di un foglio di stile ruvido reale dovrebbe includere tutti gli elementi di una pagina invece di caratteri jolly)

Poi il foglio di stile viene utilizzato solo per la stampa, o l'anteprima di stampa.

Answer 6

Anche visibility:collapse; lo fa! :)

Answer 7

se vogliamo display:inline-block o display:block con visibilità nascosta.

Quindi possiamo usare follwing css come soluzione alternativa.

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