Janrain Engage社交登录看起来在Bootstrap 3中搞砸了

Question

有没有其他人能够让Janrain Engage和Bootstrap 3.x玩得很好？

自从更新我的项目以使用Bootstrap 3后，Janrain Engage登录窗口小部件看起来乱七八糟，似乎在其边界之外溢出。根据{{​​3}}，这是由于Bootstrap使用box-sizing: border-box;。 Janrain声称他们无法进行任何更改，因为他们需要继续支持IE7，但截至2014年1月，他们已停止支持IE7。尽管如此，这一变化还没有完成，但仍然看起来很混乱。

这是Janrain Engage登录小部件在Chrome中的样子：

在Firefox中：

不幸的是，社区论坛显然不再对拥有免费帐户的用户开放，我似乎无法得到Janrain工程团队的回复。

我尝试在box-sizing: border-box;上停用<div id="janrainModalOverlay">，但它会对布局的其余部分产生负面影响。

有没有其他人想出这个问题的简单修复？

谢谢！

Answer 1

我找到了一个非常简单的修复方法。我不确定为什么我之前没遇到这个。在CSS文件中，添加以下内容：

#janrainModal {
  box-sizing: content-box;
}

希望能帮助那些正在努力解决同样问题的人。

Answer 2

出于某种原因，Janrain模式的大小并不总是正确的。也许是由于CSS冲突如字体大小？我无法花太多时间找出原因，所以使用了这个快速/肮脏的解决方案：

以下js在启动jainrain模式后进行适当的css修复。计时器用于等待'直到模态开始。更好的解决方案是绑定到更合适的事件。我稍后会发布更新（如果没有其他人）。

$('.janrainEngage').click(function() {
window.setTimeout(function(){
    $('#janrainModal').css('width', '450px')
                    .css('height', '170px');
    $('.janrainContent').css('width','95%')
                        .css('height','90%');
},50);
});