Recaptcha creates iFrame on page, breaks styling

Question

Recaptcha is adding a "This frame prevents back/forward cache problems in Safari" iFrame to the top of my website (code included below), which is pushing off the styling by 20-30px (approximately).

If I set display: none; to the element in Firebug it fixed the problem .

Does anyone know why this element has a height (I have no CSS that applies to iFrames)? Or how to set display: none; on it?

<iframe src="about:blank" style="height: 0px; width: 0px; visibility: hidden; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; ">
    This frame prevents back/forward cache problems in Safari.
</iframe>

Answer 1

Try the CSS below:

/* ReCaptcha Iframe FIX */
iframe {display:none !important;}
header iframe,
section iframe,
footer iframe,
div iframe { display:inline; }

If you don't have any other frames on the site to worry about, a simpler version should suffice:

iframe {display:none !important;}

Alternatively, you could target all iframes where src="about:blank":

iframe[src="about:blank"]{display:none;}

Answer 2

iframe[src="about:blank"]{display:none;}

This matches all iframes with the "src" attribute of "about:blank".

Answer 3

This seems simpler and more accurate:

body > iframe { display:none !important; }