Bootstrap 4 проблема с высотой карт в IE11

Question

Bootstrap 4 карты отображаются с неправильной высотой в IE11.Я видел несколько предложенных решений для этого и пытался, но у меня не получилось, и я не хочу использовать блочное решение.Ищете более элегантное решение.

.card-deck .card {
     border:0;
     background:#232323;
}
 .card-deck .card .card-img-top {
     border-radius: 0;
}
 .card-deck .card .card-header {
     background: #232323;
     border-radius: 5px 5px 0 0;
}
 .card-deck .card .card-header h4 {
     color: #eee;
     font-family: "Roboto Condensed", "Arial Narrow", Arial;
     font-size: 1em;
     line-height: 1.5em;
}


<div class="card-deck">
    <div class="card">
        <div class="card-header text-center">
            <h4>Location 1</h4>
        </div>
        <a href="#"><img class="card-img-top img-fluid" src="img/cards/location1.jpg" alt=""></a>
    </div>
    <div class="card">
        <div class="card-header text-center">
            <h4>Location 2</h4>
        </div>
        <a href="#"><img class="card-img-top img-fluid" src="img/cards/location2.jpg" alt=""></a>
    </div>
    <div class="card">
        <div class="card-header text-center">
            <h4>Location 3</h4>
        </div>
        <a href="#"><img class="card-img-top img-fluid" src="img/cards/location3.jpg" alt=""></a>
    </div>
    <div class="card">
        <div class="card-header text-center">
            <h4>Location 4</h4>
        </div>
        <a href="#"><img class="card-img-top img-fluid" src="img/cards/location4.jpg" alt=""></a>
    </div>
</div>