У меня возникли проблемы с печатью страницы с нашего веб-сайта. У нас есть специальная страница для печати некоторых деталей, включая изображения. На этой странице для печати мы убрали навигацию, брендинг и т. д., оставив только данные пользователей, чтобы они могли получить чистую печать.
Большая часть этих данных принимает форму изображений, которые могут иметь или не иметь соответствующие подписи.
Когда мы печатаем из 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 содержатся в другом элементе 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', размещенный там с помощью условных комментариев.
