Question

如果没有reCAPTCHA，我的页面就像这样（jsfiddle）：

<html>
<body>

<div class="content_wrap">
    <div class="left_container">
    </div>

    <div class="right_container">
        <div style="background-color: blue; margin:0px; height: 1500px;">
        <!--RECAPTCHA WOULD GO HERE-->
        </div>
    </div>

</div>

</body>
</html>

CSS：

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    position: relative;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    min-height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 0px;
    margin-left: 220px;
    width: 1000px;
}

使用reCAPTCHA（在蓝色区域中）整个页面内容的高度在底部减少~20px，并带有可见的空白条带。

有没有人遇到过reCAPTCHA改变布局元素的问题？

Answer 1

我已经replicate your issue基于this reCAPTCHA jsfiddle example了。

看起来reCAPTCHA会导致空iframe附加到页面底部。

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

iframe上的消息Google search导致对此问题进行了大量讨论。

这是在SO上找到的解决方案：Recaptcha creates iFrame on page, breaks styling

尝试下面的CSS：
/* ReCaptcha Iframe FIX */
iframe {display:none !important;}
header iframe,
section iframe,
footer iframe,
div iframe { display:inline; }
如果您在网站上没有任何其他框架需要担心，a 更简单的版本就足够了：
iframe {display:none !important;}

最后，这是实施解决方案的jsfiddle：http://jsfiddle.net/BXufS/7/。

Answer 2

我通过定位CSS

中的iframe src属性来解决该问题

<iframe src="about:blank" style="height: 0px; width: 0px; visibility: hidden; border: none;"></iframe>

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

当然我没有其他带有about:blank来源的iframe;）

reCAPTCHA将我的内容高度改变约-20px

2 个答案: