Question

因此，我在我正在处理的网站中的表单中添加了一个重新访问的小部件。我在几个不同的页面上使用小部件，但我只在其中一个上遇到问题。我只是在chrome中遇到这个问题。

首次加载页面时，窗口小部件根本不显示。我并不仅仅意味着形象;我的意思是整个小部件！它就好像“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');

Answer 1

<div id="recaptcha_widget" style="display:none">

<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">' . $strincorrectpleasetryagain . '</div>


</br></br>

以上分解到div将起作用。我已经通过放置换行符到我的网站，然后它开始在Crome和IE上工作。

由于

ReCaptcha没有在chrome中显示（或占用空间）。

1 个答案: