Почему мои стили печати не отображаются в IE 7 и IE 8?
У меня есть веб-страница с двумя включенными таблицами стилей:
<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" />
<link rel="stylesheet" href="/assets/css/print.css" type="text/css" media="print" />
Стили печати прекрасно работают с Chrome, Safari, Firefox и IE9, но полностью ломаются в IE7 и IE8. Некоторые изображения, которые должны быть скрыты, не являются, другие, которые должны быть видимыми, не являются. Это выглядит как беспорядок, несмотря на то, что если я загружаю обе таблицы стилей для экрана в IE7 и IE8, все выглядит именно так, как я ожидаю.
Я, к сожалению, не могу дать ссылку на страницу, так как это сайт клиента в процессе, но я хватаюсь за соломинку здесь, если у кого-то есть какие-либо идеи.
4 ответа
Оказывается, проблема заключалась в том, что элементы HTML5 не отображались правильно при печати, а HTML5 не поддерживает печать по умолчанию.
К счастью для меня (и для вас), здесь есть плагин для защиты печати IE, созданный Александром Фаркашем: https://github.com/aFarkas/html5shiv
РЕДАКТИРОВАТЬ:
Похоже, что Modernizr теперь имеет опцию печати, если вы используете Modernizr для всех ваших потребностей (полностью слово): http://modernizr.com/download/
Это действительно выстрел в темноте, не видящий ваши CSS и разметку, или, по крайней мере, приличный кусок этого!
Есть проблемы с печатью элементов с position:absolute или же fixed как отмечено в комментариях к этой статье MSDN; подразумевая, что вы должны вручную перекомпилировать их (установить position:static или, возможно, скрыть элементы полностью). Жесткий способ справиться с этим будет добавление
* {position:static !important;}
на ваш print.css; но его уместность будет зависеть от сложности страницы и от того, как вы хотите, чтобы она печаталась (т. е. только текст, заголовки и логотип или правильно оформленный дизайн).
Если вы еще не определились с тем, какой опыт печати вы хотите произвести, подумайте о прочтении еще одной замечательной статьи об alistapart, сфокусированной именно на этом!
Я думаю, что вы должны обозначить стили печати как альтернативные...
<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" />
<link rel="alternate stylesheet" href="/assets/css/print.css" type="text/css" media="print" />
На самом деле, я думаю, что это неправильно, но я оставляю это.
Вы можете попробовать изменить атрибут атрибута media для стиля печати на all, а затем обернуть все в таблицу стилей в запросе на печать:
@media print { … }
К вашему сведению, у меня была эта проблема в IE9 и 'alternate', т.е.
<link rel="alternate stylesheet" href="......." type="text/css" media="print" />
работал для меня в IE9!