CSS: скрытые элементы по-прежнему занимают место на печатном выходе

Я использую css только для печати раздела страницы:

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

Раздел над элементом, который я хочу распечатать, корректно скрывается в выходном файле печати, однако он по-прежнему занимает область пространства. Я проверил это, сделав длинный вертикальный список слов. В выводе на печать одна и та же область пробела встречается без слов, а затем происходит выход элемента. Эта проблема возникает только на хроме и мозилле. Я также тестировал параметры поля браузера, и это не проблема.

Любые идеи?

Ответы

Ответ 1

Вы хотите display:none не visibility:hidden. Последнее делает элемент невидимым, но не удаляет его из потока документов.

Ответ 2

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

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

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

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

Ответ 3

если мы хотим display:inline-block или display:block вместе с видимостью скрытой.

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

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

Ответ 4

Используйте display:none;

Ответ 5

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

Ответ 6

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

Ответ 7

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