javascript - ReCaptcha がクロムに​​表示されていません (またはスペースを占有していません)。

Question

そのため、作業中のサイト内のフォームに recaptcha ウィジェットを追加しました。複数の異なるページでウィジェットを使用していますが、そのうちの 1 つのみで問題が発生しています。この問題はクロムでのみ発生しています。

ページが最初に読み込まれたとき、ウィジェットはまったく表示されません。イメージだけではありません。私はウィジェット全体を意味します！「display:none」が適用されたかのように機能します。これは、スペースを占有せず、その要素 (文字通り html に書き込まれている要素であっても) が表示されないためです。

その後に送信ボタンをマウスオーバーすると、一貫して表示されます。ウィジェットが表示されると、そのまま残り、ちらつきも何もありません。また、Chrome の Web インスペクターでいずれかの要素のスタイルを変更すると、魔法のように表示されます。

クレイジーなことは、ウィジェットのすべての要素を調べたところ、それに関連するスタイルがなく、スペースを占有するものは何もないということです。それは完全に私の心を吹き飛ばします。

うまくいけば、これは人々が知っていることです。コードを投稿しますが、それが文脈から外れてどれほど役立つかはわかりません。

HTML:

<div id="recaptcha-widget" style="display:none">
    <div id="recaptcha_image"></div>
    <div class="recaptcha_only_if_incorrect_sol"
         style="color:red">Oops! Please try again.
    </div>
    <div class="recaptcha_links">
        <div class="recaptcha_refreshbox"><a
            href="javascript:Recaptcha.reload()"
            title="Get another CAPTCHA"></a></div>
        <div class="recaptcha_only_if_image">
            <a href="javascript:Recaptcha.switch_type('audio');$('#recaptcha_response_field').attr('placeholder', 'Enter the numbers you hear:')" title="Get an audio CAPTCHA"></a>
        </div>
        <div class="recaptcha_only_if_audio">
            <a href="javascript:Recaptcha.switch_type('image');$('#recaptcha_response_field').attr('placeholder', 'Type the two words above:')" title="Get an image CAPTCHA"></a>
        </div>
        <div class="recaptcha_help">
            <a href="javascript:Recaptcha.showhelp()" title="Help"></a>
        </div>
    </div>
    <br/>
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" placeholder="Type the two words above:"/>
    <span class="recaptcha_credit">reCAPTCHA</span>
</div>

<script type="text/javascript"
        src="http://www.google.com/recaptcha/api/challenge?k=6LfMxd4SAAAAAAqJZtKSb2Z4ilabUaMZiTyBGpGu">
</script>
<noscript>
    <iframe
        src="http://www.google.com/recaptcha/api/noscript?k=6LfMxd4SAAAAAAqJZtKSb2Z4ilabUaMZiTyBGpGu"
        height="300" width="500"
        frameborder="0"></iframe>
    <br>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40">
    </textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

CSS:

    #recaptcha-widget {
    clear: both;
    margin: 0 auto 15px;
    width: 400px;
    background-color: #40403E;
    padding: 8px 8px 0;
    border-radius: 4px;
    display: block;
    float: left;
    text-align: left;
}

#recaptcha_image {
    float: left;
    padding: 0 5px 5px 0;
}

#recaptcha_image img {
    border-radius: 2px;
}

#recaptcha_response_field {
    width: 282px;
    padding-left: 8px;
    background-image: none;
    clear: both;
    margin-top: 10px;
}

form.on-white #recaptcha_response_field
{
    color: white;
}

#recaptcha-widget .recaptcha_links {
    display: inline-block;
    position: relative;
    width: 95px;
    height: 57px;
}

#recaptcha-widget .recaptcha_links div {
    width: 40px;
    height: 25px;
    display: inline-block;
    background: #595957;
    border-radius: 2px;
    text-align: center;
    position: absolute;
}

#recaptcha-widget .recaptcha_links div.recaptcha_refreshbox {
    width: 50px;
    height: 57px;
    top: 0;
    left: 0;
}

#recaptcha-widget .recaptcha_links .recaptcha_only_if_audio,
#recaptcha-widget .recaptcha_links .recaptcha_only_if_image {
    top: 0;
    left: 55px;
}

#recaptcha-widget .recaptcha_credit {
    margin-left: 10px;
    color: #666;
}

#recaptcha-widget .recaptcha_links .recaptcha_help {
    top: 32px;
    left: 55px;
}

#recaptcha-widget .recaptcha_links a {
    background-image: url('../images/recaptcha-sprite.png');
    display: inline-block;
    float: none;

}

#recaptcha-widget .recaptcha_links .recaptcha_refreshbox a {
    width: 32px;
    height: 37px;
    background-position: 0 0;
    margin-top: 9px;
}

#recaptcha-widget .recaptcha_links .recaptcha_only_if_image a {
    width: 19px;
    height: 17px;
    background-position: -48px -20px;
    margin-top: 3px;
}

#recaptcha-widget .recaptcha_links .recaptcha_only_if_audio a {
    width: 28px;
    height: 13px;
    background-position: -36px -3px;
    margin-top: 5px;
}

#recaptcha-widget .recaptcha_links .recaptcha_help a {
    width: 10px;
    height: 15px;
    background-position: -35px -21px;
    margin-top: 5px;

}

/* #central-box is an ancestor of the problem child */

#central-box #recaptcha-widget
{
    width: 330px;
    position: relative;
}

#central-box #recaptcha-widget .recaptcha_links
{
    float: right;
}

#central-box #recaptcha-widget .recaptcha_links+div
{
    float: left;
}

#central-box #recaptcha-widget .recaptcha_links+div span
{
    display:block;
    text-align: right;
}

#central-box #recaptcha-widget .recaptcha_links+div input
{
    width: 210px;
    margin-top: 0;
}

JS:

var RecaptchaOptions = {
theme: 'custom',
custom_theme_widget: 'recaptcha-widget'
},
RecaptchaInput = $('#recaptcha_response_field');