私たちのウェブサイトからページを印刷する際に問題があります。イメージを含む詳細を印刷するための特定のページがあります。この印刷専用のページでは、ユーザーのデータだけを残して、きれいな印刷物を得ることができるように、ナビゲーション、ブランディングなどを取り除きます。IEでの印刷に問題があります
多くのデータは、キャプションが関連付けられている場合と関連付けられていない場合があります。
firefoxから印刷すると、正しく印刷されます。しかし、IE7から印刷すると、キャプションはしばしば一緒に配置され、関連付けられたイメージの上に表示されます。これは「印刷プレビュー」でも同様に表示されます。
ページ構造は次のようである:最大合計に対する
は、実際の画像は、次に「tornborder」クラス4つのネストされたdivを含有DIV、および画像に含まれている等
<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が続きます。これらのdivの両方は、両方をクリアしている別のdivに含まれています。
「予約帳」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が特定することができます条件付きコメントによってそこに置かれた '#ie7andup' div経由のIE7のターゲット設定。
本質的にCSS情報なしでこれに答えることは非常に難しいでしょう。 – Traingamer
htmlとcssの複雑さを考えると、火かき棒でテストすることなく診断するのは本当に難しいです。ページを何らかの方法で利用できるようにしたり、バグを生成するのに必要な最低限のコードを単純化して、それを把握できるかもしれないならば。 –
http://www2.dev.mem.com/Display/ContentDisplay.aspx?ID=4411376 右側のナビゲーションで、[印刷]をクリックします。リストからオプションを選択してください(見つけた再現の最も簡単な方法は、「ゲストブック」と「イメージ」を選択することです。イメージ自体は印刷バグを表示しません)。 FirefoxがFirebugをどのように役立てるかは、IE7でしかないので、私は興味があります。 – Jeff