Как обеспечить кросс-браузерную совместимость в Print на странице из всех браузеров?

Question

Как вы получаете кросс-браузерную совместимость в печати?любые советы для печати файла CSS, чтобы сделать печать на бумаге идентичной из всех браузеров.

Редактировать

Я уже использую Эрик Мейер CSS , новсе еще сталкивается с несоответствиями в другом браузере, когда мы берем печать с сайта.

Существуют ли какие-либо объявления CSS, которые мы можем использовать всегда и ставить наверху при печати css, Как и другие сбросы css, которые хорошо работают в media=screen?

Я уже использую другой файл css для печати (print.css) с media="print"

---

Было бы лучше оставить * {posotion:static}, *{float:none}, * {clear:both} в печати css всегда?

Answer 1

Идентичные результаты невозможны. Вывод зависит не только от CSS, но и от индивидуальных настроек полей страницы, возможностей принтера, доступных шрифтов, формата бумаги (A4 или US Letter) и, возможно, многого другого.

Для CSS

• Избегайте поплавков и позиционирования (относительное, абсолютное и фиксированное). Особенно Mozilla (Firefox) не может справиться с этими свойствами очень хорошо.
• Используйте page-break-*, но не полагайтесь на это. Некоторые браузеры вставляют разрывы страниц даже в изображения.
• Вы не знаете ширину и высоту страницы (может A5). Держите что-нибудь настолько гибкое, насколько это возможно.
• Для производительности поместите свой стиль печати в основную таблицу стилей в правиле @media print {}.
• Используйте pt, а не px для границ и полей. Принтер не знает, что такое пиксель, и может привести к странным результатам.
• Разработайте макет печати в Opera, которая в настоящее время имеет лучшую поддержку @media print, и вставьте хаки совместимости, когда вы закончите.
• Internet Explorer может дать сбой при печати, если вы используете его зарезервированные идентификаторы .
• Никогда не полагайтесь на предварительный просмотр. Вы получаете очень разные результаты на реальных распечатках. Сохраните тропический лес с драйвером print-to-pdf. :)

Answer 2

В html есть ссылка с атрибутом «media», установленным в «print».

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

Вы можете отключить все другие css и просто использовать свой «print» css.установите носитель сначала на «экран».Протестируйте его так же, как вы тестируете обычный css во всех браузерах.

По моему опыту, то, как оно выглядит на экране, будет выглядеть примерно так же, когда печатается.

Совет:

1) сохраняйте макет как можно более плавным, чтобы он был гибким, независимо от того, какое поле для бумаги было установлено.

2) сохраняйте его простым.

3) В IEфоны могут отсутствовать.Чтобы это исправить, зайдите в: Инструменты> Свойства обозревателя> Дополнительно.в окне настроек прокрутите вниз до пункта «Печать» и включите «Печать цветов фона и изображений»