IE11中的Bootstrap 4卡高度问题

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>