1

所以，我有一个 recaptcha 小部件添加到我正在处理的网站内的表单中。我在几个不同的页面上使用了这个小部件，但我只在其中一个页面上遇到了问题。我只在chrome中遇到这个问题。

首次加载页面时，小部件根本不会出现。我不仅仅指图像；我的意思是整个小部件！它就像应用了“display:none”一样，因为它不占用任何空间，并且它的任何元素（即使是那些字面上写入 html 的元素）都不可见。

当我将鼠标悬停在它之后的提交按钮上时，它始终出现。一旦小部件出现，它就会保持原样，不会闪烁或任何东西。如果我更改 chrome 网络检查器中任何元素的任何样式，它也会神奇地出现。

疯狂的是，我查看了小部件的每个元素，并且没有任何与之相关的样式不会占用空间。这完全让我大吃一惊。

所以，希望这是人们所知道的。我将发布代码，但我不知道它在上下文之外会有多大用处。

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');
4

1 回答 1

-2 
<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 上工作。

谢谢

于 2013-09-24T08:35:12.593 回答