奇怪的IE7打印Bug

Question

我有一个页面在IE6/7和Firefox 3.5中都可以正常显示。IE6和Firefox 3.5打印页面没有问题，但是IE7却有问题。当页面被打印时，我的内容div的前一半是不可见的，除了两个表格可以显示。在句子中间，没有任何标签或断点，内容开始重新出现。

就像有些东西隐藏了div的前一半，但让表格显示。然而，我没有不合适的标签、没有神奇的空浮动div，也没有任何验证错误，我还有其他几个使用相同CSS的页面都可以正常打印。

有人经历过类似的情况吗？如果你没有沮丧地放弃，你是如何解决的？

编辑： 我终于有更多时间来研究这个问题了，我已经很好地缩小了问题的范围。我可以通过以下两种方式使所有文本都出现：将div的“position”样式属性更改为除“absolute”以外的其他值（导致定位全部错误），或者注释掉少量内容。

这里是可以注释掉的内容...

<p><strong>个人支出：</strong>如果适用，EJTH将为您的任何额外费用（延长<!--XXXX-->机票等）计费到您的信用卡上。<strong><!-- begin broken part --><em>在电子票确认邮件发送之前，所有费用必须全额支付。不接受现场付款。注意：</em></strong>当使用信用卡进行个人购买（即可选活动、旅行延期、会议注册费等）时，“MT”将出现在您的信用卡对账单上。</p> <p>您还要对您所产生的任何个人费用负责。这些包括电话费、代客泊车和洗衣服务或个人酒吧账单。度假村收银员会为您保留这些支出的单独记录。务必在离开度假村前在前台结清您的个人账户。<strong><em>重要提示：如果您在退房时忽略支付个人（杂费）账户，EJTH将在项目结束后向您计费实际成本，加收15%的服务费。</em></strong><!-- end broken part --></p>

希望这能帮助你更多，比帮助我自己还要多。我要尝试调整CSS来解决问题，假设我今天不会被拉到其他事情中去。

编辑：屏幕截图！

第一张是当前页面的打印效果。我在页面上放了XXXX，表示内容重新出现的位置；我也在上面的代码中放了它。您可以稍微看一下就能看到它。

http://img109.imageshack.us/img109/589/current.jpg

第二张图片是当我将内容div的CSS定位从absolute改为relative时，页面打印的效果。

http://img514.imageshack.us/img514/9961/modcss.jpg

第三张图片是当我注释掉“Broken Part”后，页面打印的效果。也就是说，效果良好。

http://img514.imageshack.us/img514/653/commented.jpg

- iandisme

---

你有网址或者一些示例代码吗？ - scunliffe

很遗憾，这是一个私密页面。我真的只是希望有类似经验的人能提供建议，因为我已经完全没有想法了。 - iandisme

找到问题的最佳方法是创建一个最小的测试用例：尽可能删除HTML、CSS和内容，以便您获得仍然显示问题的最少量的代码。在这个过程中，您可能会发现自己的代码或IE7中的错误。如果没有，您可以向我们展示这个最小的测试用例，因为到那时您可以轻松地编辑掉剩余的私人信息。 - mercator

我的开发服务器恢复后，我会尽快完成这个任务 X-( - iandisme

在处理屏幕截图时，我发现如果将缩放比例从“适应页面”改为“85%”，就可以打印出页面的所有行。只有在这个比例下，所有内容才会显示出来，但是在这个比例下，右侧的最后5-10个字符会被裁剪掉。有趣的事实。屏幕截图即将发布。 - iandisme

哦，而那个85%的东西只有在将内容div的CSS位置从绝对定位改为相对定位后才起作用。 - iandisme

Answer 1

好的...我创建了一个新的CSS样式表，并将其指定为media="print"。在这个样式表中，我去掉了所有的格式和导航，并使内容完全打印出来。在IE7和Firefox中都可以正常工作。感谢所有帮助过我的人！

- iandisme

Answer 2

不完全是一个答案，恐怕有点太长了，不能写在评论里...

当你改变“position”属性时，为什么位置会“全部错误”？你是指在打印页面上的位置还是在浏览器中的位置？如果是在浏览器中，请使用单独的打印样式表...

你只能通过删除那两个段落来“修复”页面吗？或者，删除同一div中其他段落，甚至在同一页打印页面上添加长度相同的段落也可以解决问题吗？

一些谷歌搜索显示，IE7在定位和打印方面存在问题。请查看以下链接。它们可能会指引您正确的方向：

• http://www.webmasterworld.com/css/3408611.htm
• http://www.techsupportforum.com/microsoft-support/internet-explorer-forum/162695-cant-print-specific-html-ie7.html

来自第二个链接中“ThaSaltyDawg”发布的帖子看起来是最具信息量的，尽管它似乎涉及了不同的IE7打印错误：

经过试错，我找到了解决我的问题的方法。正如我所猜测的那样，这是CSS引起的。使用浮动、定位、层叠顺序和其他一些元素的组合会导致IE出现一些意外的结果。在访问Microsoft支持页面后，我发现IE存在这方面的一个错误。

在我的情况下，在IE中使用浮点值与 <table> 不兼容。它显示得还好，但对于打印来说并不理想。同时，请确保您的位置值是正确的。如果您嵌套了<table>和<div>，请确保您的层叠顺序是正确的。

没有真正固定的设置方式，这取决于它们的使用，因为我的几个页面需要进行不同的调整。

浮动和绝对定位的元素似乎会带来最多的问题。所以你可能只能采用之前的“解决方案”，在打印样式表中更改 div 的 position 属性，然后逐步修复破损的布局。

- mercator

Answer 3

即使有打印样式表，我发现IE7（有时候还有IE8）会忽略某些样式。

经过一番测试，似乎是因为我引用的类名存在于html5标签中。如果你有包裹的div，你可以直接定位它们，这对我来说解决了问题。

- alexkb