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

このreCAPTCHAjsfiddleの例に基づいて、問題を再現することができました。

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

srcCSSで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 に答える