代码之家 › 专栏 › 技术社区 › Jeff

在IE中打印有问题

printing internet-explorer css

Jeff · 技术社区 · 17 年前

我在从我们的网站打印页面时遇到一些问题。我们有一个特定的页面,可以打印包括图像在内的一些详细信息。在这个特定于打印的页面上,我们去掉了导航、品牌等,只留下用户的数据,这样他们就可以得到一个干净的打印。

其中大部分数据采用图像的形式,这些图像可能有也可能没有相关的标题。

当我们从Firefox打印时,它会正确打印。然而,从IE7打印时,标题通常放在一起,远高于它们的相关图像。它也以这种方式出现在“打印预览”中。

页面结构如下:

<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。这两个分隔符都包含在另一个分隔符中,该分隔符已清除这两个分隔符。

如果不包括“来宾登记簿”部分(如未选择该功能进行打印),则图像将正确打印。

我尝试了很多不同的事情,包括移除所有的浮点数和清除所有的内容,但是我似乎无法使这个打印工作正常。

有什么想法吗?

编辑:只是为了清楚地说明,这是代码的相关部分,用大量的草率剥离完成了文本。实际页面中的所有标记都已正确关闭并嵌套。该页是有效的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的目标。

3 回复 | 直到 17 年前

Jeff 17 年前

好吧,我知道只有当图片跟在文本后面时才会发生这种情况(比如从故事或留言簿中),我重新排列了复选框的顺序-图片现在总是第一个。

这个错误会消失,但无法解决。

不是一个最佳的解决方案,但我已经为此花费了16个多小时。

wheresrhys 17 年前

在过去,我也遇到过类似的问题,比如清除IE中的浮点数。尝试在CSS中给出图像和标题的显式宽度。宽度:自动;甚至可以。

braindice 17 年前

可能还试图清除浮点数-已经修复了一些看似随机的问题