正如您在 fiddle 上看到的,我试图实现的是图像在 block 中居中,文本位于底部。
这在 chrome 上工作正常,但在 ie11 上它看起来像 .item 容器的高度已经崩溃,所以布局看起来完全坏了。我是不是把这个复杂化了,或者我这样做的方式有一个已知的 IE 错误?
http://jsfiddle.net/kco6ybd4/7/ (在url末尾添加show,即可在IE11上查看)
.row {
padding: 10px;
display: flex;
flex-flow: row wrap;
}
.item {
display: flex;
flex-flow: column;
text-align: center;
padding: 5px;
width: calc(100% * (1/4));
box-sizing: border-box;
}
.image {
flex: 1 0 0%;
align-items: center;
display: flex;
margin-bottom: auto;
max-width: 100%;
}
img {
max-width: 100%;
display: block;
}
.text {
height: 50px;
}
最佳答案
这个问题很有趣,所以我尝试了不同的方法来寻找可能的跨浏览器解决方案。对我来说最大的问题是为每个图像获取准确的最大宽度(当你回显图像时,这可以用 jquery 或在 php 中实现,但我想找到一个纯 CSS 解决方案,因为这是诀窍)。为此,我使用单个媒体查询对代码进行了硬核处理(我知道,它不是那么漂亮),您可以使用更好的宽度进行更改。
这个方法是跨浏览器的(我用IE11测试过)。也许这对您来说不是正确的解决方案,但我认为这是面对问题的一种可能方法。 :)
试试这个:
.row {
padding: 10px;
display: flex;
flex-flow: row wrap;
}
.item {
display: flex;
flex-flow: column;
text-align: center;
padding: 5px;
width: calc(100% * (1/4));
box-sizing: border-box;
min-height: 1px; /* trick for IE11 */
}
.image {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 1px; /* trick for IE11 */
}
img {
flex: 0 1 auto;
}
.text {
height: 50px;
}
@media screen and (max-width: 1200px) {
img {
width: 100%;
}
}
关于css - Flexbox 元素的高度在 IE 上折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51364432/