问题
I am working on a template in bootstrap 4.0.0 that I will use for multiple gallery pages containing many (50+) mixed ratio images. I have a grid layout that works well except for IE11. My images are inside cards that are inside buttons and the card heights seem to be stretching to the maximum height of the responsive images.
- I need help determining if there is a way to make the boxes shrink in height as well as width in IE 11. (width part is working)
- I want to keep what I have : Cols equal height, images centered inside with the text at the bottom, not mashed up against the bottom of the image.
- I would be happy (for IE only) with the results I get if I uncheck display:flex in IE's DOM explorer under the "card" class. It reduced the size of the card but I lose vertical centering. So not a good overall solution.
I autoprefixed, and played with the options on this flexbox bug page and was not sucessful.
I have tried to include the code in the snippet but it isn't working so I am just going to provide this link to a bootply:
Screen shot of problem with IE11 showing the column heights are way too tall: Link
Image showing how the grid looks in other browsers Link
Everything works in every modern browser, screen size, and device except IE11 which accounts for 10% of visitors. (I am not worried about anything older that does not support bootstrap 4.0 like ie9 or safari 8)
回答1:
This works in IE 10 and 11 Card Height Issue: Fixed
* {
min-height: 0.01px;
}回答2:
Just add h-100 class:
<img class="card-img h-100">
回答3:
I encountered the same issue, specifically using card-deck as the wrapper for the cards. Here's how I got round the issue:
CSS
.franses-img {
background-color: gray;
}
.franses-img img {
width: 100%;
height: auto;
display: block !important;
}
.img-fluid {
width: 100%;
}
.card {
display: block !important;
}
.card-footer {
position:absolute;
bottom: 0px;
}
HTML
<div class="card-deck">
<div class="card border-secondary mb-3">
<div class="franses-img"><img src="http://localhost:61955/Images/media/UZ80218DGW65.jpg" id="p-223" class="card-img-top"/></div>
<div class="card-body">
<div class="card-text"> </div>
</div>
<div class="card-footer"><input type="checkbox" id="223" /></div>
</div>
<div class="card border-secondary mb-3">
<div class="franses-img"><img src="http://localhost:61955/Images/media/WEDDING_1.jpg" id="p-238" class="card-img-top"/></div>
<div class="card-body">
<div class="card-text"> </div>
</div>
<div class="card-footer"><input type="checkbox" id="238" /></div>
</div>
<div class="card border-secondary mb-3">
<div class="franses-img"><img src="http://localhost:61955/Images/media/wb3_1.jpg" id="p-234" class="card-img-top"/></div>
<div class="card-body">
<div class="card-text"> </div>
</div>
<div class="card-footer"><input type="checkbox" id="234" /></div>
</div>
<div class="card border-secondary mb-3">
<div class="franses-img"><img src="http://localhost:61955/Images/media/XD729_1.jpg" id="p-240" class="card-img-top"/></div>
<div class="card-body">
<div class="card-text"> </div>
</div>
<div class="card-footer"><input type="checkbox" id="240" /></div>
</div>
<div class="card border-secondary mb-3">
<div class="franses-img"><img src="http://localhost:61955/Images/media/wb4_1.jpg" id="p-236" class="card-img-top"/></div>
<div class="card-body">
<div class="card-text"> </div>
</div>
<div class="card-footer"><input type="checkbox" id="236" /></div>
</div>
<div class="card border-secondary mb-3">
<div class="franses-img"><img src="http://localhost:61955/Images/media/UZ80218DGW65_2.jpg" id="p-225" class="card-img-top"/></div>
<div class="card-body">
<div class="card-text"> </div>
</div>
<div class="card-footer"><input type="checkbox" id="225" /></div>
</div>
</div>
- The card css class is overridden to use display:block
- The image used in card-img-top is wrapped in a div with a class which sets the width of the image to 100% and height to auto, also display set to block.
- The card-footer css class was overridden to ensure the card-footer
sat at the bottom of the card.
回答4:
I found an answer that works in IE 11 and almost in 10.
However, it breaks in safari 9 and 10, but is good in 11.
Actually I redid the whole thing again, much cleaner, all "bootstrapy" with only 1 custom css class and img-fluid modificaiton for IE11 The main thing that solved it was putting the button inside a card and adding h-100 to both classes. Ialso had to put the img in a blank div or firefox would distort image ratios.
css
.img-fluid {
width: 100%;
}
.tall {
padding: .6em 1rem 0 1rem;
}
relevant html
<div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 pb-3 px-2">
<div class="card h-100 border border-secondary text-center">
<a href="#" class="btn h-100 d-flex align-items-center
justify-content-center" role="button">
<div>
<img src="http://picsum.photos/300/150" class="img-fluid">
</div>
</a>
<p class=" text-dark">Wide Img Btn<br> <span class="text-warning d-block d-md-none">Invisible save for phones Extended captions will wrap blah blah blah</span></p>
</div>
</div>
https://www.bootply.com/uyEOFuUjJl
below line was the first fix. buts still a huge mess:
This works in IE 10 and 11 but as noted above, its kind of a mess.
I had to add h-100 to my card-body as well as the card.
https://www.bootply.com/vRYNMCZTZk
Its not exactly my problem, but I found a hint here in this github post https://github.com/twbs/bootstrap/issues/21885
来源：https://stackoverflow.com/questions/48657729/ie11-flexbox-issue-bootstrap-4-card-height-is-maximum-of-child-card-body-img-f