为什么这个reCAPTCHA以奇怪的方式显示？

Question

我最近将reCAPTCHA添加到了我的项目

但它显示如下

输入下的空间看起来很有趣。我该如何解决这个问题？

如果有人对代码感到好奇

script(type='text/javascript', src='http://www.google.com/recaptcha/api/challenge?k=MY_KEY')

noscript
  iframe(src='http://www.google.com/recaptcha/api/noscript?k=MY_KEY', height='300', width='500', frameborder='0')
  br
  textarea(name='recaptcha_challenge_field', rows='3', cols='40')
  input(type='hidden', name='recaptcha_response_field', value='manual_challenge')

是的，上面是玉石。因此，如果您对Node.JS和Express项目的其他验证码类型解决方案有建议，请发表评论。

Answer 1

看起来Foundation与它有兼容性问题。 加上这个：

#recaptcha_area input[type="text"] {
  display: inline-block;
  height: auto;
}
#recaptcha_response_field {
  margin: 12px 0 0 0!important;
}

Answer 2

除了Mike Causer的回答代码，我还要添加这个额外的CSS来修复我的：

#recaptcha_area table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td {
line-height: normal;}

如果出现其他任何问题，我建议使用浏览器的元素检查器系统地浏览DOM的reCaptcha节点，并取消选中正在应用的所有Zurb Foundation css，直到您看到reCaptcha显示为止。这就是我发现我必须覆盖的CSS代码的方式。