为什么这个 reCAPTCHA 会以一种奇怪的方式显示？答案

【问题标题】：Why is this reCAPTCHA displaying in an odd manner?为什么这个 reCAPTCHA 会以一种奇怪的方式显示？
【发布时间】：2013-12-27 01:47:18
【问题描述】：

我最近在我的项目中添加了 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 项目的其他验证码类型解决方案有任何建议，请发表评论。

【问题讨论】：

标签： css pug recaptcha

【解决方案1】：

Foundation 似乎存在兼容性问题。添加这个：

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

【讨论】：

我还必须将margin-top: 0.8rem!important 添加到#recaptcha_area input[type="text"] { 选择器中。

【解决方案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 代码的方式。

【讨论】：