Bootstrap invalid-tooltip在IE上无法正常工作

Question

我刚遇到的有趣的IE兼容性问题。我有这样的代码：

<div class="row d-flex justify-content-around">
    <div class="col-sm-12 col-md-4 px-3">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">{% trans 'Some string' %}</span>
            </div>
            {{ base_form_key.ss }}
            <div class="invalid-tooltip">
                {% trans 'Enter a correct value or leave this field empty. x and y cannot be the same!' %}
            </div>
        </div>  
    </div>        
</div>

Chrome中的代码为我带来了不错的输出，我期望：

但是，在IE上，它最终垂直拉伸该工具提示框，如下所示：

它告诉我的是，IE在这里解释某些CSS样式与Chrome有所不同，但不知道是什么。有人遇到过同样的问题吗？