IE11 flexbox问题:引导程序4卡的高度是子卡主体"img-fluid"的最大高度. [英] IE11 flexbox issue: bootstrap 4 card height is maximum of child card-body "img-fluid"

问题描述

我正在使用Bootstrap 4.0.0中的模板，该模板将用于包含许多(50+)混合比例图像的多个画廊页面.我有一个网格布局，除了IE11之外，效果都很好.我的图像位于按钮内的卡片内，卡片的高度似乎在伸展到响应图像的最大高度.

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.

• 我需要帮助确定是否有办法使IE 11中的框的高度和宽度缩小.(宽度部分正在工作)
• 我要保持自己的状态:cols高度相等，图像居中，文本在底部，而不是与图像底部混在一起.
• 如果取消选中"card"类下IE的DOM资源管理器中的display:flex，我会对得到的结果感到满意(仅适用于IE).它减小了卡的尺寸，但我失去了垂直居中的功能.所以不是一个好的整体解决方案.

• 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.

我自动添加了前缀，并使用了此flexbox错误页面上的选项，并且不成功.

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:

IE11问题的屏幕快照，显示列高过高: 链接

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

除IE11占10％的访问者外，所有一切都可以在每种现代浏览器，屏幕尺寸和设备中使用. (我不担心任何不支持bootstrap 4.0的旧版本，例如ie9或safari 8)

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)

推荐答案

我找到了一个适用于IE 11以及几乎适用于10的答案.

I found an answer that works in IE 11 and almost in 10.

但是，它在Safari 9和Safari 10中都无法使用，但在11中是不错的.

However, it breaks in safari 9 and 10, but is good in 11.

实际上，我重新整理了整个内容，更简洁了，所有的"bootstrapy"都只有1个自定义的CSS类和IE11的img-fluid修改 解决该问题的主要方法是将按钮放在卡片中，并在两个类别中都添加了h-100.我还必须将img放在空白的div中，否则Firefox将扭曲图像比例.

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;
}             

相关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:

这在IE 10和11中有效，但如上所述，有点混乱.

This works in IE 10 and 11 but as noted above, its kind of a mess.

我必须在卡体和卡上添加h-100.

I had to add h-100 to my card-body as well as the card.

https://www.bootply.com/vRYNMCZTZk

这不完全是我的问题，但是我在此github帖子 https:/上找到了一个提示/github.com/twbs/bootstrap/issues/21885

Its not exactly my problem, but I found a hint here in this github post https://github.com/twbs/bootstrap/issues/21885

这篇关于IE11 flexbox问题:引导程序4卡的高度是子卡主体"img-fluid"的最大高度.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！