Recaptcha在页面上创建iFrame，破坏了样式。

Question

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

如果我在 Firebug 中将元素的 display: none; 设置为解决了该问题。

有人知道为什么这个元素有高度（我没有应用于 iFrames 的 CSS）吗？或者如何对其设置 display: none;？

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

- Walker

Answer 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;}

- James Hill

---

这里有10个感谢积分，因为你解决了和我一样的问题！=P - Manatax

+1，这就是那种让人发疯的东西！ - Mike Perrenoud

谢谢你。这真的让我抓狂了。顺便说一下：reCAPTCHA API 真的很糟糕...设计它的人让我想死。 - wnajar

Answer 2

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

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

- Leo Jiang

---

应该使用 src 而不是 href 来嵌入 iframe。 - Imre L

Answer 3

这似乎更简单、更准确：

body > iframe { display:none !important; }

- Brendon Muir