it-swarm.com.ru

Запросы печатных СМИ игнорируются в Chrome?

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

@media print {
/* Styles */
}

Поскольку мы используем SASS, все стили скомпилированы в одну таблицу стилей styles.css во время выполнения, которая объявлена ​​в <head> документа следующим образом:

<link rel='stylesheet' href='/assets/css/styles.css'>

Теперь, когда я печатаю из Chrome (Ctrl + P), он полностью игнорирует мои стили печати, но Firefox (30.0) - это нормально. IE (11) ужасен, но это потому, что у нас много панелей отображения/скрытия, которым IE не нравится / 

Не могу на всю жизнь понять, что происходит. Если я эмулирую печатные носители в Chrome, то они прекрасно загружают стили, но когда я действительно пытаюсь печатать, это не работает. Я пробовал множество вещей, добавление атрибутов media=, двойных кавычек, изменение порядка href и т.д., Но все безрезультатно !!

Обратите внимание, что мы больше не используем type, так как я думал, что вам больше не нужно это использовать. Я попытался добавить это в любом случае, но это все еще не работает!

Я даже попробовал это: http://lawrencenaman.com/optimisation/print-media-queries-not-working/ но это все равно не работает. Это сводит меня с ума, есть идеи?

ОБНОВЛЕНИЕ: Итак, я заметил, что когда я нажимаю Ctrl + P, чтобы напечатать страницу, предварительный просмотр, который я вижу, использует некоторые стили из таблицы стилей печати, но, похоже, отображает все с помощью мобильного медиа-запроса? Я думаю, что может быть некоторый конфликт с точкой останова, будет обновляться, когда я получу шанс.

ОБНОВЛЕНИЕ 2: Я вижу, что таблица стилей печати загружается внизу, так что теоретически это должно перезаписать все другие медиа запросы (по крайней мере те, которые я пытаюсь перезаписать)?

11
zik

Я пытался добавить

@media print {
    * {
        display:none;
    }
}

на один из моих сайтов style.css: не работает.

Потом я добавил

<link rel="stylesheet" href="/css/print.css" media="print">

после других таблиц стилей в заголовок и вставил то же правило, что и выше (без @media print {}) в print.css. Chrome теперь интерпретирует правило и ничего не отображает в предварительном просмотре.

Я предполагаю, что проблема заключается в использовании @media print. Но я понятия не имею, почему хром ведет себя так.

Правка: Другое решение с помощью JavaScript:

if(/chrome/i.test(navigator.userAgent) {
    document.write('<link rel="stylesheet" href="printChrome.css" media="print">');
}
14
SVSchmidt

Вы можете попробовать установить остальные атрибуты media таблиц стилей как

media="screen" и распечатайте таблицу стилей в media="print".

Это предотвратит применение браузером правил из таблиц стилей, помеченных как «screen».

7
Bilal Akhtar

Я тоже столкнулся с этой проблемой и обнаружил, что это связано с настройками рендеринга в Chrome. При тестировании предварительного просмотра я установил тип печатного носителя для эмуляции. Когда я приступил к тестовой печати, я установил эмуляцию носителя на «экран». Я должен был установить, чтобы это было "без эмуляции". Когда это было на «экране», предварительный просмотр печати игнорировал все запросы печатных СМИ и все еще рассматривал страницу как экран. Когда я наконец установил его обратно в режим «без эмуляции», он начал вести себя так, как и следовало ожидать.

1
Ben Reeves

Проблема, с которой я столкнулся, заключалась в том, что rel='stylesheet' не был указан в ссылке print css. Добавление этого решило проблему.

1
Ryan Knutson

Еще один способ сделать это: ошибки CSS перед стилями печати. Так как у всех нас, кажется, есть импульс поставить стили печати последними, они более уязвимы для этого. Когда CSS имеет ошибку, он не жалуется ... он просто отбрасывает остальную часть таблицы стилей. 

Предоставление стилям печати их собственной таблицы стилей - даже просто отдельного встроенного тега - может решить эту проблему, а также ошибку тега media-spec'd-in-style-tag.

0
Roger Krueger