Firefox 不会打印带有 display:none 样式的 iframe答案

【问题标题】：Firefox won't print iframe styled with display:noneFirefox 不会打印带有 display:none 样式的 iframe
【发布时间】：2011-11-08 15:34:50
【问题描述】：

我正在使用来自this 答案的代码直接从打印按钮打印单独的页面。用户单击打印按钮，然后将 url 发送到打印功能。打印函数将单独的页面加载到 display:none iframe 中并打印该 iframe onLoad。它适用于 IE、Chrome 但不适用于 Firefox。在 Firefox 中，它将页面加载到 div 中，但从不打印或打开打印对话框。事实证明，如果将 iframe 设置为display:none，firefox 将不会打印 iframe，如下所示：

<div id="printerDiv" style="display:none"></div>

这是预期的行为吗？所有其他浏览器都可以打印，我正在考虑在 Bugzilla 上发布。我尝试了一些css“技巧”来使div不显示在用户可以看到的地方，但它总是以某种方式可见。我目前正在使用以下 CSS 使 iframe 不可见：

#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}

但它的边距仍然存在，并且在生成 iframe 后会留下 14px 的间隙。如果没有display:none 属性，是否有某种方法可以使 iframe 根本不可见？更好的是，有没有办法做到这一点而无需像这样的黑客攻击？

我什至尝试使用 CSS 将 iframe 设置为display:block @print 媒体类型和display:none 用于屏幕，JS 函数仍然不会打印。

【问题讨论】：

可能是因为网址在不同的域中。
不是，其实我是在传递一个相对链接。我尝试了一个绝对链接，但它遇到了同样的问题。
将 iframe 绝对定位在页面之外..
@Greg Agnew 如果您愿意，可以将其作为答案发布，我会接受，这是我正在使用的解决方案。

标签： html css firefox cross-browser

【解决方案1】：

我遇到了完全相同的问题。当 display 属性设置为 none 时，对于 $('#printerDiv').css('height')、$('#printerDiv')[0].style.height 或在元素上调用 outerHeight() 或 outerWidth() 时，Firefox 返回 0。

我为此使用了 z-index，它不会绑定您使用 position:absolute。

所以，你可以在 css 文件中包含这个：

#printerDiv { z-index: -10; }

然后，当您想让它可见时，只需使用 jquery css() 调用设置 z-index。

【讨论】：

我会尽快尝试这个解决方案，好像它比绝对定位更可取。
是的，我知道。 :) 我最近才想出这个。另外，如果你使用绝对定位，那么使用visibility:hidden 可能比使用display:none 好一点。
该元素占据了相当大的空间，因此可见性：隐藏不起作用，设置宽度/高度也不会隐藏它。该解决方案在 Firefox 和 Chrome 中运行良好。仍然不在 IE 中，但我认为我必须完全为 IE 做一个单独的解决方案。
顺便说一句，该元素需要 CSS 中的 position:absolute 才能使 z-index 在 Firefox 中工作，所以我将其包含在您的答案中

【解决方案2】：

如果您将 iFrame 绝对放置在页面之外，它仍然可以打印，但对用户不可见。

#printerDiv iframe{
  position: absolute;
  top: -1000px;
}

【讨论】：

再次感谢。但只有位置/顶部属性被证明是必要的，因为 iframe 不再可见。

【解决方案3】：

如果你控制 iframe 的内容，让它自己打印：

<script type="text/javascript">
window.print()
</script>

【讨论】：

将该文本添加到源文档确实会在 Firefox 中启动打印对话框，如果源已打开（我试图避免这种情况，这是一个直接打印作业）。但是它在display:none iframe 中不起作用，所以我的按钮仍然不起作用
我更新了问题，问题不在于 JS，而在于 Firefox 显然是如何处理样式的。
改为一个像素一个像素。
我试过了，默认框架的全宽一旦打开就会显示...