У меня возникли проблемы с печатью страницы с нашего сайта. У нас есть специальная страница для печати некоторых деталей, которые включают изображения. На этой странице, посвященной печати, мы снимаем навигацию, брендинг и т. Д., Оставляя только данные пользователей, чтобы они могли получить чистую печать.Проблема с печатью в IE
Значительная часть этих данных имеет форму изображений, которые могут иметь или не иметь связанных надписей.
Когда мы печатаем из firefox, он печатает правильно. Однако при печати из IE 7 подписи часто размещаются вместе, значительно выше их ассоциированного изображения. Он также отображается в «Предварительный просмотр».
Структура страницы, как это:
<head>
stuff
</head>
<body>
<div class="ContentDisplay">
<div id="contentcontainer" class="threecolumn general">
<div id="maincontent" class="content">
<div id="ctl00_mainContent_contentHolder">
<br></br><div>
<h2><span id="ctl00_mainContent_ctl02_lblGuestBook">Guest Book</span></h2>
<div class="tribute_holder">
<div class="tribute_info" style="padding-bottom: 1px;">
<p></p>
<p></p>
</div>
<div class="pagination audiopaging">
</div>
<br />
<div id="ctl00_mainContent_ctl02_gbPanel" class="tributes">
<div>
<h3>
Text</p>
</div>
</div>
</div>
</div><br></br><div>
<h2><span id="ctl00_mainContent_ctl05_lblImages">Images</span></h2>
<div id="ctl00_mainContent_ctl05_plainImages">
<span id="ctl00_mainContent_ctl05_plainImagesLabel"></span>
<div style="clear:both;"><div style="margin-left:auto;margin-right:auto;" class="torncontainer"><div class="tornborder">
<div>
<div>
<div>
<div>
<img src="image path" alt="caption 1" style="border-width:0px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;margin-bottom:2em;clear:both;">caption 1</div>
</div>
<div style="clear:both;">
<div style="margin-left:auto;margin-right:auto;" class="torncontainer"><div class="tornborder">
<div>
<div>
<div>
<div>
<img src="image source" alt="caption 2" style="border-width:0px;" />
</div>
</div>
</div>
</div>
</div></div><div style="text-align:center;margin-bottom:2em;clear:both;">caption 2</div></div>
т.д.
Подводя итог, реальное изображение содержится в «» tornborder класса DIV, который содержит 4 вложенные дивы, а затем образ (этот класс используется для визуализации графической границы вокруг изображения), а затем div, содержащий надпись. Оба эти divs содержатся в другом div, который имеет четкие оба.
Когда не включен раздел «Гостевая книга» (например, когда эта функция не выбрана для печати), изображения печатаются правильно.
Я пробовал много разных вещей, включая удаление всех поплавков и очищение всего, но я не могу заставить эту печать работать правильно.
Любые идеи?
РЕДАКТИРОВАТЬ: просто, чтобы прояснить это, это часть кода, с большим количеством поспешного снятия текста. Все теги на фактической странице правильно закрыты и вложены. Страница действительна HTML.
EDIT второй:
Вот соответствующая информация CSS, это все «печать» таблица стилей:
/* Torn Border */
.tornborder div
{
background: url(/images/universal/tl.jpg) top left no-repeat;
float: left;
margin: 0 0 20px 0;
}
.tornborder div div
{
background: url(/images/universal/tr.jpg) top right no-repeat;
margin: 0;
padding: 15px 0 0 0;
}
.tornborder div div div
{
background: url(/images/universal/rb.jpg) top right repeat-y;
margin: 0;
padding: 0;
}
.tornborder div div div div
{
background: url(/images/universal/bl.jpg) bottom left no-repeat;
}
.tornborder div div div div img
{
background: url(/images/universal/br.jpg) bottom right no-repeat;
margin: -15px 0 0 0;
padding: 15px;
/*width: 130px;*/
}
#ie7andup .tornborder div div div div img, #ie6andbelow .tornborder div div div div img
{
margin: -15px 0 -5px 0;
display:inline-block;
}
DIV вокруг всей страницы (только внутри тела) позволяет для конкретных нацеливание IE7 через div ## ie7andup, помещенный там условными комментариями.
Было бы чрезвычайно сложно ответить на это, по существу, без информации css. – Traingamer
Учитывая сложность использования html и css, его очень сложно диагностировать без тестирования в firebug.Если вы можете сделать страницу доступной в некотором роде или упростить код до минимума, необходимого для создания ошибки, чем я мог бы это понять. –
Хорошо. http://www2.dev.mem.com/Display/ContentDisplay.aspx?ID=4411376 В правой руке нажмите «Печать». Выберите параметры из списка (самый простой способ воспроизвести, который я нашел, - это выбрать «Гостевая книга» и «Изображения», изображения сами по себе НЕ отображают ошибку печати). Мне любопытно, как Firefox с Firebug поможет, хотя это происходит только в IE7. – Jeff