2009-04-23 86 views
0

我在打印网页时遇到了一些麻烦。我们有一个特定的页面来打印包含图像的一些细节。在这个特定的打印页面上,我们删除了导航,品牌等,只留下了用户的数据,以便他们可以获得干净的打印。在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进行定位,并通过条件注释放置在那里。

+0

这将是非常困难的回答这与本质上没有CSS信息。 – Traingamer 2009-04-23 18:56:03

+0

考虑到HTML和CSS的复杂性,如果没有在萤火虫中测试,确实很难诊断。如果你能够以某种方式使页面可用,或者简化代码来减少产生错误所需的最低限度,那么我可能会弄清楚。 – 2009-04-23 19:43:48

+0

好的。 http://www2.dev.mem.com/Display/ContentDisplay.aspx?ID=4411376 在右侧导航栏中,单击“打印”。从列表中选择选项(最简单的重现方法是找到'留言簿'和'图片',图片本身不会显示打印错误)。 我很好奇Firefox和Firebug是如何帮助的,尽管这只发生在IE7中。 – Jeff 2009-04-23 19:51:05

回答

1

好了,因为我知道这只有当图像跟随文本(比如从故事或留言)时我重新排列复选框的顺序 - 图像现在总是第一个。

该错误将会消失,但不会被解决。

不是一个最佳解决方案,但我已经烧了超过16个小时。

0

我在过去曾经遇到类似的问题,在清除浮点数。试着在CSS中给你的图像和标题明确的宽度。宽度:汽车;甚至可以做。

0

也可以尝试清除花车 - 有那样的解决似乎是随机的问题有时