您好,我正在做一个元素。后来我在 IE 上发现了一个烦人的错误。 css 在 Chrome 和 Firefox 上工作正常,但在 IE(不是边缘)上它看起来很奇怪。
页面中间的div很长,不好看。 有人知道一个好的解决方案吗?顺便说一句,我正在使用 Bootstrap 。
这是元素:Osolemio
<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>
最佳答案
设置max-height
如果图像都是相同的和静态的,则设置为静态大小会起作用,但如果您想要更动态的东西,您可以尝试以下任一解决方案:
设置flex-shrink: 0
或 overflow: hidden
在 card > a
上标签。
图像的原始大小是 600px 高,我认为这就是为什么 IE 有那么大的空白...我猜它的计算是关闭的 height:auto
关于html - Div 在 Internet Explorer 上更长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49822421/