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

Posted 2023-03-10

【中文标题】Recaptcha 在页面上创建 iFrame，破坏样式

【英文标题】：Recaptcha creates iFrame on page, breaks styling

【发布时间】：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>

【参考方案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;