Bootstrap invalid-tooltip not working correctly on IE

问题

Funny IE-compatibility issue I have just experienced. I have a code like that:

<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>

That code in Chrome generates for me a nice output I expect:

However, on IE it ends up vertically stretching that tooltip box like so:

What it tells me is that IE interprets some CSS styling differently to Chrome here, but dunno what exactly. Has anyone encountered the same problem?

来源：https://stackoverflow.com/questions/55153439/bootstrap-invalid-tooltip-not-working-correctly-on-ie

标签

css