При печати моей table
html calendar- в Chrome она отлично работает.
В IE8, с другой стороны, он не включает цвета фона и изображения. Я пошел за этим полезным сообщением, чтобы установить его как вариант по умолчанию.
Только проблема; это не работает. Никаких изменений вообще. Я знаю, что мой css включен, потому что он работает как в Chrome, так и из-за правильной печати границ таблицы, td и tr, ширины, высоты, выравнивание, шрифты и цвета текста. Однако контуры, изображения и цвета фона игнорируются. Я дважды проверил, что параметры моего принтера в настройках IE8 установлены, чтобы включить их, и я перезапустил браузер несколько раз.
РЕДАКТИРОВАТЬ:
Я только что узнал, что мне нужно сказать IE8, что я хочу, чтобы мои цвета и такие были в двух местах. Вот ссылка, описывающая вторую: http://support.microsoft.com/kb/974128
Однако он работал только на моих цветах. Не мои контурные границы между ячейками...
Вот мой код для запуска printElement.
function printCalendar(){
$('#printable').printElement({
overrideElementCSS:['../css/calendarprintstyle.css'],
printBodyOptions:{ pageTitle:'calendar'}
});
}
#printable
- это div
, обертывающий table
.
Вот пример css, который работает неправильно. Это outline
и /background
, которые не работают.background-color
table{
display: table;
border-collapse: collapse;
border-spacing: 0px;
border-color: black;
table-layout: fixed;
font-family: arial;
font-size: 12px;
}
th{
background-color:blue;
color:white;
font-weight: bold;
outline: 1px solid black;
}
td, tr{
height: 20px;
max-height: 20px;
padding: 0px;
}
.calendar {
border: 2px solid black;
table-layout: fixed;
white-space: nowrap;
overflow:hidden;
float: center;
}
.calendarcell {
outline: 1px solid black;
height: 20px;
white-space: nowrap;
overflow:hidden;
max-height: 20px;
width: 180px;
max-width: 180px;
}
.datedatacell {
outline: 1px solid black;
width: 20px;
min-width: 20px;
max-width: 20px;
border-left: 2px;
text-align: center;
}
.holidaystyle {
background-color: #f00;
color: #fff;
outline: 1px solid black;
}
.everydaystyle {
background-color: #fff;
color: black;
}
Большинство браузеров по умолчанию не печатает цвета фона и изображения, но обычно они имеют настройку, чтобы разрешить это. Для текущего IE этот параметр можно найти в диалоговом окне "Параметры страницы".
Кажется, что IE не печатает цветные границы. Вы всегда должны ожидать, что браузер не будет (или часто не может) отображать что-то точно, как указано. IE6 не может использовать display: table, браузер с сенсорным экраном не может использовать: зависание, текстовые браузеры не могут отображать разные размеры шрифтов, голосовые браузеры не могут отображать цвета, а некоторые браузеры не могут печатать цветные границы или фоны и т.д. Но так работает Интернет, и если ваша концепция дизайна требует чего-то подобного, то пришло время переосмыслить вашу концепцию дизайна.
вам нужно выполнить две задачи:
сначала: обратите внимание, что IE8 не распознает теги HTML5 и HTML5shiv (если вы его включили) не работает во время печати, попробуйте включить этот файл (HTML5shiv print) также в свой документ
вы также можете получить html5shiv и html5print с сайта modernizr
конкретный CSS предназначен только для исправления различий стиля, которые могут существовать, когда вы имеете дело с кросс-совместимостью браузера, которые обычно находятся в позиционировании стилей, а не в цветах и т.
но обратите внимание, что ваша основная проблема заключается в том, что HTML5, который не поддерживается в IE8, и чтобы исправить эту проблему, люди, использующие
https://code.google.com/p/html5shim/
или Modernizer или HTML5Shiv, когда они имеют дело с IE8 и более низкой версией на странице HTML5, эти библиотеки позволяют старым браузерам правильно отображать страницы HTML5
во-вторых: вы должны добавить определенную таблицу стилей для печати в IE8 (если вы хотите переопределить основные стили или столкнуться с какой-либо проблемой, связанной с CSS, например позиционированием) на вашу страницу, которую вы должны, и этот фрагмент кода в ваш HTML-код:
<!--[if lte IE 8]><link rel="stylesheet" media="print" href="/print.css" type="text/css" /><![endif]-->
после этого вы должны создать файл print.css и добавить нужные стили.
это запрос печати @media, и цель состоит в том, чтобы отделить основную форму формы отпечатка
стиль в браузере, и вы можете иметь совершенно разные взгляды и ощущения, пока вы печатаете страницу, пока вы просматриваете ее.
но, пожалуйста, не то, что эти библиотеки не работают во время печати
если вы хотите, чтобы IE8 и более низкие версии распознавали теги HTML5 в режиме печати, вы должны добавить другие js-библиотеки, например
https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv-printshiv.js
HTML5shiv.print с веб-сайта Модернизатора