@media print не работает должным образом в Chrome



Нашли/прочитали / попробовали много ответов на этот вопрос, так что извините, если решение уже было опубликовано, но Chrome не отображает стили печати правильно со многими элементами отсутствует (но не все).

Вот как все устроено.

1. SETUP

  • Стили печати задаются в конце основного css файла с помощью @media print

  • На ссылке нет атрибута media, который загружает css-файл

  • Мы объявляем !important на всех стили печати

  • Стили печати переопределяют стили экрана там, где это необходимо (т. е.@media screen

  • Эмуляция печати в Chrome Dev tools отлично отображает стили печати

  • Но некоторые элементы исчезают при печати (и / или печати в PDF)

  • Проблема возникает при использовании кнопки print HTML или "печать" из файла меню

  • Эта проблема не возникает в Firefox или Safari


2. УСТРАНЕНИЕ НЕПОЛАДОК

  • Стили печати были завернуты в @media only print {}

  • Поэтому попытался удалить ‘только’, как это @media print {}, но никакой разницы

  • Если я неправильно перемещаю ‘только’, чтобы быть после "print", как это @media print only {}

  • Затем некоторые из отсутствующих элементов печати отображаются, но другие исчезают

  • Как отмечалось в другом месте, попробовал этот хак в начале стилей печати, но нет удача

    * { -webkit-transition: none !important; transition: none !important; }


Любая помощь или предложения будут приветствоваться.

Ура

Бен

134   1  

1 ответ:

Эта проблема вызвана объявлением CSS display: inline-block в вашем основном классе content container, presenter-notes__main-content.

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

Итак, что происходит, когда у вас есть элемент, который слишком велик, чтобы поместиться на одной странице, но не может быть разделен на несколько страниц? Бред какой-то, вот что! Конечно, некоторые браузеры могут изящно деградировать и просто обрезать переполнение, но другие могут запутаться и вообще удалить элемент. Компьютеры не очень хорошо справляются с парадоксами.

    Ничего не найдено.

Добавить ответ:
Отменить.