Firefox won't print iframe styled with display:none

I'm using code from this answer to print a separate page directly from a print button. The user clicks the print button and a url is sent to the print function. The print function loads the separate page into a display:none iframe and prints that iframe onLoad. It works in IE, Chrome but not firefox. In firefox it loads the page into the div but never prints or opens the print dialog. It turns out firefox will not print an iframe if it is set to display:none as below:

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

Is this expected behavior? All other browsers print, I'm thinking of posting on Bugzilla. I tried some css "tricks" to make the div not display where the user can see it, but it's always visible in some way. I'm currently using the below CSS to make the iframe invisible:

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

But it's margins still exist and leave a 14px gap once the iframe is generated. Is there some way to make the iframe not be visible at all without the display:none attribute? Better yet, is there some way to do this without a 开发者_如何学JAVAhack like that?

I even tried using CSS to set the iframe to display:block @print media types and display:none for screen, the JS function still won't print.

If you absolutely position your iFrame off the page, it will still be printable while not being visible to the user.

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

I had exactly the same problem. When the display attribute is set to none, Firefox returns 0 for $('#printerDiv').css('height'), $('#printerDiv')[0].style.height or when outerHeight() or outerWidth() are called on the element.

I used z-index for this which does not bind you to use position:absolute.

So, you could have this in the css file:

#printerDiv { z-index: -10; }

Then, when you want to make it visible, just set the z-index using a jquery css() call.

If you control the content of the iframe, make it print itself:

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