reCaptcha 样式已损坏

Posted 2023-04-17

【中文标题】reCaptcha 样式已损坏

【英文标题】：reCaptcha styling is broken

【发布时间】：2013-05-14 05:50:09

【问题描述】：

我在以下网站中实施了 reCaptcha。我使用 Google Code 中的 recaptchalib.php 并没有更改 PHP 文件中的任何内容。

但是，我网站中的结果 reCaptcha 似乎坏了。按钮上方有奇怪的空白区域。它工作得很好，但它并不漂亮:(

这里是有问题的网站： http://###（已删除）

这是我用来回显 reCaptcha 表单的代码

require_once('recaptchalib.php');
$publickey = "XXXXXXXXXXX"; // you got this from the signup page
echo recaptcha_get_html($publickey);

最好的问候

【参考方案1】：

我在使用 reCaptcha 的所有网站上都遇到了同样的问题。 CSS 以某种方式被扭曲了。但我发现这是我在正文标签中的行高。我相信你也有同样的问题。只需在您的样式表中使用这个 css。

#recaptcha_area, #recaptcha_table  line-height: 0!important;

【讨论】：

谢谢 MarieWeb！你救了我的命：D

应该在recaptcha的默认css中！谢谢！

如果 recaptcha 在 Twitter Bootstrap Accordion 中，这将不起作用。有线够了，我找不到什么乱七八糟的。

好吧，我遇到了同样的问题。现在看起来不错，但在验证码文本字段上仍有一个Privacy & Terms 链接。有什么解决办法吗？

【参考方案2】：

最近刚刚添加了 Re-Captcha (05/2014)，以下 css sn-ps 对我有用。

   .recaptchatable, #recaptcha_area tr, #recaptcha_area td, #recaptcha_area th 
        line-height: 0 !important;
   
   #recaptcha_area input 
        height: auto;
        display: inline;
   

【讨论】：

我尝试了其他人的解决方案，但没有一个解决方案有效。添加日期为 2015 年 8 月 26 日。谢谢。

【参考方案3】：

就我而言，我必须重置 input 小部件的 display 和 height 属性：

#recaptcha_area input 
    height: auto;
    display: inline;

【参考方案4】：

这对我有用！

#recaptcha_area input 
       height:auto;
       display: inline;
   
#recaptcha_area * 
  line-height:normal;

【参考方案5】：

这对我有用

.recaptchatable, #recaptcha_area tr, #recaptcha_area td, #recaptcha_area th
    line-height: 0 !important;
 
#recaptcha_area input 
    height: auto;
    display: inline;

自定义更多 https://developers.google.com/recaptcha/old/docs/customization?hl=en

【参考方案6】：

这对我有用

#recaptcha_table  
    table-layout: auto;