Recaptcha 在页面上创建 iFrame，破坏样式答案

【问题标题】：Recaptcha creates iFrame on page, breaks stylingRecaptcha 在页面上创建 iFrame，破坏样式
【发布时间】：2011-12-30 15:16:37
【问题描述】：

Recaptcha 正在我的网站顶部添加一个“此框架可防止 Safari 中的后退/前进缓存问题”iFrame（代码包含在下面），这会将样式推迟 20-30 像素（大约）。

如果我将 display: none; 设置为 Firebug 中的元素，它可以解决问题。

有谁知道为什么这个元素有高度（我没有适用于 iFrames 的 CSS）？或者如何设置显示：无；有吗？

<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>

【问题讨论】：

标签： html css captcha recaptcha

【解决方案1】：

试试下面的 CSS：

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

如果您无需担心网站上的任何其他框架，那么更简单的版本就足够了：

iframe {display:none !important;}

或者，您可以定位src="about:blank": 的所有 iframe：

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

【讨论】：

这里有 10 分感谢您在心跳上解决了我同样的问题！ =P
+1，这就是让一个人发疯的东西！
谢谢你。这真的让我发疯了。旁注：reCAPTCHA API 非常悲惨……无论是谁设计的都让我想死。

【解决方案2】：

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

这匹配所有具有“about:blank”的“src”属性的 iframe。

【讨论】：

来自@OwenMelbourne：iframe 应该是 src 而不是 href

【解决方案3】：

这似乎更简单更准确：

body > iframe { display:none !important; }

【讨论】：