html - Div 在 Internet Explorer 上更长

Question

您好，我正在做一个元素。后来我在 IE 上发现了一个烦人的错误。 css 在 Chrome 和 Firefox 上工作正常，但在 IE(不是边缘)上它看起来很奇怪。

页面中间的div很长，不好看。有人知道一个好的解决方案吗？顺便说一句，我正在使用 Bootstrap 。

这是元素:Osolemio

enter image description here

    <div class="card mb-4 box-shadow">
    <a href="http://osolemio.bsenn.nl/images/pizza/sate-pizza.png" data-lightbox="image-1" data-title="Pizza sate">
        <img class="card-img-top" src="http://osolemio.bsenn.nl/images/pizza/sate-pizza.png" alt="Card image cap">
    </a>
    <div class="card-body">
        <h5 class="card-title" style="font-weight: bold">Pizza Quattro Formaggi</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <h5 class="position-absolute">$24.99</h5>
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-sm btn-success">Toevoegen</button>
        </div>
    </div>
</div>

我的解决方案是:

style="flex-shrink:0;"

<a style="flex-shrink:0;" href="{{asset($product->imagePath)}}" data-lightbox="image-1" data-title="Pizza sate">
    <img class="card-img-top"  src="{{asset($product->imagePath)}}" alt="Card image cap">
</a>

Answer 1

设置max-height如果图像都是相同的和静态的，则设置为静态大小会起作用，但如果您想要更动态的东西，您可以尝试以下任一解决方案:

设置flex-shrink: 0 或 overflow: hidden在 card > a 上标签。

图像的原始大小是 600px 高，我认为这就是为什么 IE 有那么大的空白...我猜它的计算是关闭的 height:auto