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:inline-block или display:block вместе со скрытой видимостью.

Тогда мы можем использовать следующий css в качестве обходного пути.

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

Answer 3

Используйте @media для печати. Например:

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

(только грубый пример. Фактическая таблица стилей должна включать все элементы страницы вместо подстановочных знаков)

Тогда таблица стилей используется только при печати или предварительном просмотре.

Answer 4

использовать дисплей: нет; так как вы хотите отображать только печать и без части тела.

Answer 5

Попробуйте использовать display: none;.

Answer 6

Использование display:none;

Answer 7

Даже visibility:collapse; делает это!:)