IE11 flexbox问题：bootstrap 4卡高度最大的儿童卡身“img-fluid”

Question

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

我需要帮助确定是否有一种方法可以使盒子的高度和IE 11中的宽度缩小。（宽度部分工作）
我想保留我所拥有的：Cols相等的高度，图像居中在底部，文本在底部，而不是与图像的底部混在一起。
如果我取消选中显示，我会很高兴（对于IE而言）我得到的结果：在“卡片”类下的IE浏览器中的flex。它减小了卡的大小，但我失去了垂直居中。所以不是一个好的整体解决方案

我autoprefixed，并与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>

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

Answer 2

只需添加h-100类：

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

Answer 3

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

* {
   min-height: 0.01px;
}

Answer 4

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

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

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

CSS

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

IE11 flexbox问题：bootstrap 4卡高度最大的儿童卡身“img-fluid”

问题描述投票：3回答：4

4个回答

最新问题

IE11 flexbox问题：bootstrap 4卡高度最大的儿童卡身“img-fluid”

问题描述 投票：3回答：4

4个回答

最新问题

问题描述投票：3回答：4