Еще одна вещь, которую я просто помнил, можно присвоить различную таблицу стилей странице для печати по сравнению с дисплеем.
В дополнение к Вашему нормальному определению таблицы стилей, можно добавить следующий тег
<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />
, Который представит документ согласно тому стилю, когда Вы отправите его на принтер. Это позволяет Вам разделять фоновые изображения, дополнительную информацию о заголовке/нижнем колонтитуле и просто печатать необработанную информацию, не создавая отдельный модуль.
Стиль привязки и удаление диапазона.
(Проблема связана с тем, как некоторые браузеры обрабатывают элементы, которые являются display: block
внутри элементов, которые являются display: inline
. Вы можете обойти это, применив стили как для привязки, так и для диапазона, но в этом примере диапазон кажется избыточным)
Определенно, вам нужно удалить диапазон и применить этот класс к тегу привязки. Я не думаю, что вам нужно явно устанавливать ширину на 100%, но я могу ошибаться.
Remove the extra span and place that title class on the link itself. Then add width:100%; to the css.
Less markup is most often better, thats why you should remove the extra span.