2

我使用基本的 Twitter Bootstrap .less 文件作为 ASP.NET MVC4 网站的基本样式。我已使用 Microsoft.Web.Helpers.ReCaptcha 类将 ReCaptcha 添加到注册页面。简化示例：

<head>
  <link rel="stylesheet/less" href="@Url.Content("~/scripts/less/style.less")" />
</head>

@ReCaptcha.GetHtml()

结果如下所示：

混乱的 ReCaptcha

如果我使用 Chrome 开发工具或 firebug 并少删除 twitter 引导程序，我会得到预期的 ReCaptcha：

好的验证码

当然，这会破坏网站的所有其他样式，这是不可取的。有没有其他人经历过这种情况，除了手动更改引导类来为 ReCaptcha 类添加异常之外，是否有任何解决方案？

4

4 回答 4

8

这就是为我解决的问题。在 MVC 4 Web 应用程序中使用 Bootstrap 2.3.2。我在所有其他 CSS 之后添加了以下 CSS。

.recaptchatable * {
    border: 0 !important;
}

body {
    line-height: normal !important;
}
于 2013-06-12T21:12:39.167 回答
4

我喜欢meffect在这里的回答，但是因为我使用脚本化的 css 文件来改变我在引导程序中的其他布局。稍作改动并移动line-height内部的属性.recaptchatable为我解决了这个问题：

.recaptchatable * {
    border: 0 !important;
    line-height: normal !important; }

可以帮助某人。

于 2013-07-14T16:21:59.093 回答
0

我现在想通了......在我们网站的自定义 .less 文件中，我们向所有表格元素添加了以下规则，以修复不同表格元素上的布局：

table th, table td { overflow: hidden; }

添加另一个特定于 ReCaptcha 生成的 html 的规则为我们解决了这个问题：

#recaptcha_table{ table-layout: auto; }
于 2012-10-18T13:41:21.987 回答
0

这对我有用

#recaptcha_widget_div{
     .recaptchatable img{
         max-width: auto;
     }

     input{
         line-height: initial;
         height: auto;
     }
 }
于 2014-07-05T13:40:15.090 回答