Question

我在从我们的网站打印页面时遇到了一些麻烦。我们有一个特定页面用于打印包含图像的一些细节。在这个特定于打印的页面上，我们删除了导航，品牌等，只留下用户的数据，以便他们可以获得干净的打印。

大部分数据采用图像的形式，可能有也可能没有相关的字幕。

从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（例如未选择该功能进行打印），图像将正确打印。

我尝试了很多不同的东西，包括移除所有浮动并清除所有内容，但我似乎无法使此打印正常工作。

有什么想法吗？

编辑：只是为了说清楚，这是代码的相关部分，对文本进行了大量的草率剥离。实际页面中的所有标签都已正确关闭和嵌套。该页面是有效的HTML。

编辑第二个：

这是相关的CSS信息，这是整个'print'样式表：

/* 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进行特定定位，并通过条件注释放置在那里。

Answer 1

好吧，鉴于我知道这只发生在图片跟随文字时（如故事或留言簿），我正在重新排列复选框的顺序 - 图像现在将永远是第一个。

该错误将消失，但无法解决。

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

Answer 2

我在过去遇到类似的问题，就像清除花车一样。尝试在CSS中为图片和标题提供明确的宽度。宽度：汽车;甚至可能会这样做。

Answer 3

可能还会尝试清除花车 - 有时会解决看似随机问题的问题

在IE中打印有问题

3 个答案: