IE11 flexbox 问题：bootstrap 4 卡高度是子卡体的最大值 "img-fluid"

Question

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

我需要帮助来确定是否有办法在 IE 11 中缩小框的高度和宽度。（宽度部分有效）
我想保留现有的内容：列等高，图像在内部居中，文本在底部，而不是与图像底部混在一起。
如果我在 "card" class 下的 IE DOM 资源管理器中取消选中 display:flex，我会很高兴（仅适用于 IE）得到的结果。它减小了卡片的尺寸，但我失去了垂直居中。所以不是一个好的整体解决方案。

我自动添加了前缀，并尝试了 this flexbox bug page 上的选项，但没有成功。

我尝试将代码包含在代码片段中，但它不起作用，所以我将提供这个 link to a bootply:

显示列高度太高的 IE11 问题的屏幕截图：Link

显示网格在其他浏览器中的外观的图片Link

除 IE11 外，所有现代浏览器、屏幕尺寸和设备均适用，IE11 占访问者的 10%。（我不担心任何不支持 bootstrap 4.0 的旧版本，例如 ie9 或 safari 8）

Answer 1

我找到了适用于 IE 11 和几乎适用于 10 的答案。

然而，它在 safari 9 和 10 中损坏，但在 11 中很好。

实际上我又重做了一遍，更干净了，所有 "bootstrapy" 只有 1 个自定义 css class 和 IE11 的 img-fluid modificaiton 解决它的主要方法是将按钮放入卡片中，并将 h-100 添加到两个 classes。我还必须将 img 放在空白处 div 否则 firefox 会扭曲图像比例。

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

下一行是第一个修复。但还是一团糟：

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

我不得不将 h-100 添加到我的卡体和卡中。

https://www.bootply.com/vRYNMCZTZk

这不完全是我的问题，但我在此 github post https://github.com/twbs/bootstrap/issues/21885

中找到了提示

Answer 2

我遇到了同样的问题，特别是使用 card-deck 作为卡片的包装器。以下是我如何解决这个问题：

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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
            </div>
            <div class="card-footer"><input type="checkbox" id="225" /></div>
        </div>
</div>

卡 css class 被覆盖以使用 display:block
card-img-top 中使用的图像被包裹在 div 和 class 中将图像的宽度设置为 100%，将高度设置为自动，同时显示设置为阻止。
卡片页脚 css class 被覆盖以确保卡片页脚
坐在卡片的底部。

Answer 3

只需添加 h-100 class:

<img class="card-img h-100">

Answer 4

这适用于 IE 10 和 11 卡高度问题：已修复

* {
   min-height: 0.01px;
}

IE11 flexbox 问题：bootstrap 4 卡高度是子卡体的最大值 "img-fluid"

IE11 flexbox issue: bootstrap 4 card height is maximum of child card-body "img-fluid"

flexbox

twitter-bootstrap-4