У меня проблемы с печатью страницы с нашего сайта. У нас есть специальная страница для печати некоторых деталей, которая включает изображения. На этой странице, предназначенной для печати, мы удаляем навигацию, брендинг и т. Д., Оставляя только данные пользователей, чтобы они могли получить чистую печать.
Большая часть этих данных принимает форму изображений, которые могут иметь или не иметь связанные заголовки.
Когда мы печатаем из 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>
и т.д.
Подводя итог, можно сказать, что фактическое изображение содержится в div класса 'tornborder', который содержит 4 вложенных div, а затем изображение (этот класс используется для визуализации графической границы вокруг изображения), за которым следует div, содержащий подпись. Оба эти элемента содержатся в другом элементе div, в котором есть оба элемента.
Если раздел «Гостевая книга» не включен (например, когда эта функция не выбрана для печати), изображения печатаются правильно.
Я пробовал МНОЖЕСТВО разных вещей, включая удаление всех поплавков и очистку всего, но я не могу заставить эту печать работать правильно.
Есть идеи?
РЕДАКТИРОВАТЬ: Просто чтобы прояснить, это соответствующая часть кода, с большим количеством поспешного вырезания текста сделано. Все теги на текущей странице правильно закрыты и вложены. На странице действительный HTML.
РЕДАКТИРОВАТЬ второе:
Вот соответствующая информация 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", размещаемого там с помощью условных комментариев.