I’m boggled by this one. I’m building a site that looks great in FF, Chrome and Edge. It’s mostly readable in IE11 except for the two images (under Menu) which are inside a Bootstrap 4 grid. It makes space for them in the layout, but the images don’t appear. Other images on the page appear just fine, even ones inside a grid. Removing img-fluid alone doesn’t fix it. Removing class=“card wow fadeInUp hoverable” from the wrapper alone doesn’t fix it. However if you remove both, the image will appear, but will not be responsive. If I add max-width:100%, it breaks again. So I guess that’s the issue, but it has to be a conflict with something else, as the Bootstrap 4 documentation looks fine. I’ve replaced the images with text to check the grid, it’s fine. Any help would be appreciated.
I think it’s to do with IE’s terrible handling of flex, something I’ve fallen foul of before.
I’ve also had IE hide elements behind things when it shouldn’t, until you give it positioning, I though it may be that, but in inspect, the elements containing the pictures don’t have sufficient width to show the image, so it may not be the stacking order, but how flex and width (doesn’t) works in IE.
No, I don’t have a fix yet.
It doesn’t look great, but it works without doing too much to break the look in the other browsers. I would love a real solution to this issue, but this will do for now.