5

如果没有 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;
}

​</p>

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

有没有人在 reCAPTCHA 更改布局元素时遇到问题？

4

2 回答 2

5

我已经能够根据这个 reCAPTCHA jsfiddle 示例复制您的问题。

看起来 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，引起了很多关于这个问题的讨论。

这是在 SO 上找到的解决方案：Recaptcha 在页面上创建 iFrame，破坏样式

试试下面的 CSS：

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

如果您在网站上没有任何其他框架需要担心，一个更简单的版本就足够了：

iframe {display:none !important;}

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

于 2012-12-14T02:05:50.000 回答
3

src我通过在 CSS 中定位 iframe 属性来解决这个问题

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

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

当然，我没有其他带有about:blank源的 iframe ;)

于 2014-04-21T20:55:36.833 回答