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

为什么从iframe打印页面时看到不同的字体大小?

printing css html javascript asp.net

CMPalmer · 技术社区 · 15 年前

我有一个简单的,基于表格的HTML页面,有一个非常简单的样式表。我可以打开IE7和Firefox 3的页面,看起来完全一样。我可以打印这两个浏览器的页面,看起来完全一样。我们将此页面称为“problempage.htm”

现在,在一个asp.net页面中,我创建一个iframe并将该html加载到iframe中,如下所示:

window.frames[iframeId].location.href = "../ProblemPage.htm";

当用户单击ASP.NET页上的按钮时,它将调用一个执行此操作的函数:

window.frames[iframeId].focus();
window.frames[iframeId].print();

当我这样做并打印出来时,firefox版本看起来和我单独加载页面并打印出来时完全一样。IE7版本将所有字体大小减少到一半左右。

请注意,页面设置设置基本上是默认设置。我使用了不同的打印机并直接打印成pdf格式。我已经多次清除了我的缓存,以确保我使用相同的css。然而,在同一个ie7会话中,页面本身以一种方式打印,通过iframe打印的页面如上所述以较小的字体打印。在单个firefox会话中,页面本身的打印与通过iframe打印的页面完全相同。

有什么想法吗?当我在ie上打印时,我的一些风格可能“泄漏”到页面中,或者ie在iframe中解释不同的风格。

更新

好吧,我想这不是“泄露风格”。如果我将yahoo css reset放在problem page.css文件中,这四种情况下,两种浏览器都会选择它,但问题仍然存在:当ie从iframe打印页面时,字体大小会被搞砸。

更新2

没发现问题。简单的测试项目没有显示出相同的问题,我怀疑母版页、主题或类似的东西可能有问题。有趣的是,这个问题并没有出现在ie6上,只是ie7。

最后,我用有条件注释的css解决了这个问题。这是整个应用程序的唯一部分,我必须使用条件CSS。

仍然想有一个答案(甚至是一些关于下一步要找什么的摇摆)。

5 回复 | 直到 13 年前

Jason N. Gaylord 15 年前

确保要打印的页面引用了正确的样式表。如果不是,有些浏览器可能会拉入父浏览器,而其他浏览器可能不会。

Matt 15 年前

当你描述“较小的字体大小”时,它让我想到了在我的css中有一个堆叠的“字体大小:0.8em”细节的情况。通过堆叠,我的意思是,显示超小的文本是在其上有EM字体大小的父元素的内部,并且它本身有一个。

我不希望在iframe上出现这种情况,但我想我会把它扔出去以防万一。

bobince 15 年前

听起来怪怪的。没有在线测试很难诊断,但是:

如果在父页面中从javascript中window.print()也会发生同样的情况吗?
如果不是,让子帧调用函数或在父帧上的脚本中设置变量,然后(当通过超时或轮询将控件返回父页时)在其自己的窗口中调用print()如何?

Aduir 14 年前

下午好! 如果你还有问题,试试这篇文章。这对我有好处。

http://bytes.com/topic/misc/answers/629926-ie7-printing-iframe-solution

Krzysiek Grzembski 13 年前

你可以试试这个:

function pr(frameId){
    var printed;
    var iframe = document.getElementById(frameId);
    var ifWindow = iframe.contentWindow || iframe;
    ifWindow.focus();

    try {
        var printed =ifWindow.execCommand('print', false, null);
    } catch (e) {

    }

    if (! printed) {
        ifWindow.print();
    }
}