Печатайте таблицы стилей в аду - ищите предложения по нерешенным проблемам - PullRequest
Новая
       29

Печатайте таблицы стилей в аду - ищите предложения по нерешенным проблемам

3 голосов
/ 10 августа 2011

Я работаю над тем, чтобы печатать одну из наших веб-карт наполовину приличным способом буквально несколько дней. Я опубликовал этот вопрос восемь дней назад, но с тех пор работал над проблемой, изложенной там. Теперь я имею дело с несколькими другими проблемами, которые я просто не могу понять.

Прежде всего, вот ссылка на страницу, которую я пытаюсь распечатать: http://maps.nps.gov/maps/rich/footstepsofhistory.

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

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

  1. Скрыть все ненужные элементы.
  2. Измените размер карты, чтобы заполнить всю страницу, за исключением заголовка 70px в верхней части. Размер должен изменяться независимо от размера отпечатка.
  3. Показать абсолютно позиционированный элемент div, который отображает атрибуты выбранной в данный момент точки по центру по горизонтали на странице и 15px снизу вверх.

Вот проблемы, которые остаются:

  1. Я жестко задаю высоту карты div для 760px. Я бы предпочел просто использовать height:100%;. Я делаю это, потому что, похоже, это единственный способ остановить переполнение карты на второй странице в некоторых браузерах.
  2. Карта "учитывает" жестко заданную высоту 760px, когда она печатается до нажатия на точку. Однако после нажатия на точку в некоторых браузерах карта распечатывается на ~ 50% от высоты страницы. Это я просто не могу объяснить.
  3. Самая большая проблема связана с Internet Explorer 8. Карта всегда уходит на вторую страницу при печати. Я перепробовал все, что мог, чтобы решить эту проблему, но не нашел никаких решений.

Проверенные браузеры:

  • Safari на Mac OS X: все отлично работает.
  • Chrome в Mac OS X / Windows, Firefox в Mac OS X / Windows, Internet Explorer 7: печать без нажатия на точку сначала правильно печатает страницу - кроме карты не занимает точно всю высоту страница из-за жестко заданной высоты div. Печать после нажатия на точку изменяет размер карты в распечатке до ~ 50% от высоты области печати. ​​
  • Internet Explorer 8: печать как до, так и после нажатия на точку на карте приводит к тому, что карта стекает с первой страницы на вторую.
  • Internet Explorer 9: печать до и после нажатия на точку на карте изменяет размер карты в распечатке до ~ 50% от высоты области печати. ​​

Я думал о том, чтобы перевести Internet Explorer в режим IE7 в качестве обходного пути, но кажется, что все проблемы, которые я вижу, должны быть исправлены, и у меня неприятный вкус во рту при использовании тега X-UA-Compatibile. Это также решило бы только одну из двух оставшихся проблем. Конечно, есть лучший способ!?!?!?

И, наконец, я знаю, что могу создать PDF-файл страницы, но я действительно хочу избежать этого, если это возможно.

Спасибо за любую помощь, которую вы можете оказать, и я могу опубликовать дополнительную информацию здесь, если это необходимо.

1 Ответ

5 голосов
/ 13 августа 2011

Еще через несколько дней, потянув за волосы, я смог правильно начать печатать, не сталкиваясь с проблемами.

По сути, я начал с изменения своего мышления и подхода. Принимая во внимание, что прежде чем я пытался найти решение, которое работало бы для всех браузеров, я решил сосредоточиться на каждом отдельном браузере по одному. Я начал с создания таблицы стилей печати для Internet Explorer и загружал ее только в том случае, если пользователь загружал сайт с помощью IE: 

<!--[if IE]>
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint-ie.css" />
<![endif]-->
<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint.css" />
<!--<![endif]-->

Затем я начал работать над настройкой печати для работы в Internet Explorer. После нескольких настроек я просто добавил следующее в таблицу стилей печати IE: 

html,body {margin:0 !important;padding:0 !important;}

Это решило проблемы для IE 7, 8 и 9. Я не уверен, почему мне пришлось снова установить эти стили в моей таблице стилей печати, так как они уже были установлены в другой таблице стилей, которая должна иметь был применен во время печати: 

<link rel="stylesheet" type="text/css" media="all" href="/css/rich/footstepsofhistory.css" />

но по какой-то причине они явно не применялись должным образом.

Оттуда был ветер. Мне просто нужно было внести небольшие изменения в таблицу стилей печати, отличную от IE, чтобы все работало в Chrome, Firefox и Safari, и тогда я был в порядке.

Краткое описание извлеченных уроков:

  • Сохраняйте таблицы стилей печати максимально простыми.
  • Если у вас странные проблемы с компоновкой, сохраните здравомыслие, просто создав таблицу стилей для Internet Explorer. Черт возьми, если нужно, создайте таблицы стилей печати для каждой версии Internet Explorer. Я убежден, что в некоторых случаях это единственный способ обеспечить правильную работу печати во всех браузерах.
  • Chrome обладает лучшими «живыми» возможностями редактирования CSS. Если вы ищете инструмент, позволяющий динамически просматривать изменения CSS по мере их внесения, используйте Chrome.
...