Question

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

我需要帮助确定是否有办法让IE 11中的盒子高度和宽度都缩小。（宽度部分正常工作）
我想保留我所拥有的：Cols相等的高度，图像居中在底部，文本在底部，而不是与图像的底部混在一起。
如果我取消选中显示，我会很满意（仅适用于IE）我得到的结果：在＆＃34;卡＆＃34;下的IE浏览器中的flex类。它减小了卡的大小，但我失去了垂直居中。所以不是一个好的整体解决方案。

我自动反映，并使用this flexbox bug page上的选项进行播放并且没有成功。

我已尝试将代码包含在代码段中，但它不起作用，所以我只是提供此link to a bootply:

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

图片显示了网格在其他浏览器中的显示效果Link

一切都适用于除IE11之外的每个现代浏览器，屏幕尺寸和设备，IE11占访问者的10％。（我并不担心任何不支持bootstrap 4.0的旧版本，如ie9或safari 8）

Answer 1

我遇到了同样的问题，特别是使用卡片作为卡片的包装。以下是我解决问题的方法：

<强> 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>

重写card css类以使用display：block
card-img-top中使用的图像包含在一个div中将图像的宽度设置为100％，将高度设置为自动，同时显示设置为阻止。
卡片页脚css课程被覆盖以确保卡片页脚坐在卡的底部。

Answer 2

只需添加h-100类：

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

Answer 3

这在IE 10和11卡高度问题中有效：已修复

TransactionCode

Answer 4

我找到了一个在IE 11中工作的答案，几乎在10年。

然而，它在9和10的旅行中打破，但在11中很好。

实际上我重新整理了整个东西，更清洁，所有“bootstrapy”只有1个自定义css类和img-fluid modificaiton for IE11 解决这个问题的主要方法是将按钮放入卡中，并在两个类中添加h-100。我也不得不把img放在一个空白的div或firefox中会扭曲图像比例。

css

.img-fluid {
width: 100%;
}
.tall {
padding: .6em 1rem 0 1rem;
}

IE11 flexbox问题：bootstrap 4卡高是儿童卡身的最大值＆＃34; img-fluid＆＃34;

4 个答案: