我在打印网页时遇到了一些麻烦。我们有一个特定的页面来打印包含图像的一些细节。在这个特定的打印页面上,我们删除了导航,品牌等,只留下了用户的数据,以便他们可以获得干净的打印。在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,然后将图像(该类用于在图像周围呈现图形边框),接着是包含标题的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允许特定通过'#ie7andup'div对IE7进行定位,并通过条件注释放置在那里。
这将是非常困难的回答这与本质上没有CSS信息。 – Traingamer 2009-04-23 18:56:03
考虑到HTML和CSS的复杂性,如果没有在萤火虫中测试,确实很难诊断。如果你能够以某种方式使页面可用,或者简化代码来减少产生错误所需的最低限度,那么我可能会弄清楚。 – 2009-04-23 19:43:48
好的。 http://www2.dev.mem.com/Display/ContentDisplay.aspx?ID=4411376 在右侧导航栏中,单击“打印”。从列表中选择选项(最简单的重现方法是找到'留言簿'和'图片',图片本身不会显示打印错误)。 我很好奇Firefox和Firebug是如何帮助的,尽管这只发生在IE7中。 – Jeff 2009-04-23 19:51:05