Braintree dropin额外的高度答案

【问题标题】：braintree dropin extra heightBraintree dropin额外的高度
【发布时间】：2019-11-24 08:59:48
【问题描述】：

我正在使用braintree dropin UI：

<div id="braintree-dropin"></div>

var braintree_client_token = "{{ braintree_client_token }}";

function braintreeSetup() {
    // Here you tell Braintree to add the drop-in to your division above
    braintree.setup(braintree_client_token, "dropin", {
        container: "braintree-dropin"
        , onError: function (obj) {
            // Errors will be added to the html code
            $('[type=submit]').prop('disabled', false);
            $('.braintree-notifications').html('<p class="alert alert-danger">' + obj.message + '</p>');
        }
    });
}

braintreeSetup();

而且生成的dropin有很多不必要的高度：

我该如何进行调试以及可能导致这种情况的原因？我已经在生产环境和实际环境中进行了测试，但同样的问题仍然存在。

编辑：

您可以在此处查找和检查： http://floarplans.com/order/

【问题讨论】：

全面披露：我在 Braintree 工作。我无法通过我的 JSv2 Drop-in 集成来复制这个问题，因为我没有看到尾随空格。请联系我们的Support team 提供更多详细信息，以便我们进一步排除故障。
@JacqueD 谢谢！快速提问：引导布局或类是否有可能影响 iframe 的高度？我已经能够更改宽度，但我的代码是否有可能以某种方式影响 iframe 而没有专门针对它？如果您愿意，可以在这里查看：floarplans.com/order
@Marijus，它在订单 lnk 上给出授权错误
你能创建一个 JSFiddle 吗？

标签： javascript iframe braintree

【解决方案1】：

这是因为你的 theme.css 行 2480 有以下规则：

iframe {
    width: 100%;
    min-height: 350px;
    border: none;
}

如果您在 head 标签的末尾包含以下 css。

<head>
<!-- Lots of meta and link tags. -->
<style>
    iframe#braintree-dropin-frame {
        min-height: initial;
    }
</style>
</head>

这应该会将其重置为正常状态。因为在 css 中，最新和更具体的规则会覆盖其他规则。

【讨论】：