Question

在IE11中，如果为弹性框定义宽度，而子img元素的max-width为100％，则不会尊重max-width。有人找到了解决方案吗？

这适用于IE10，Chrome和Firefox，但IE11中断了：
http://jsfiddle.net/3ky60heq/

＆＃13;

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 500px;
  height: 125px;
}

.image1 {
  width: 100%;
}

.image2,
.image3 {
  max-width: 100%;
}

＆＃13;

<div class='container'>
  <img class='image1' src="https://clagnut.com/sandbox/imagetests/wideimg.png">
</div>

<div class='container'>
  <img class='image2' src="https://clagnut.com/sandbox/imagetests/wideimg.png">
</div>

<div class='container'>
  <img class='image3' src="https://clagnut.com/sandbox/imagetests/smimg1.jpg">
</div>

＆＃13;

我认识到这个问题之前已经被问过并且有许多不同的答案，但是我在StackOverflow或其他地方找到的每个解决方案都有效地强制图像的宽度为100％或者在其他浏览器上中断。

Answer 1

我想我已经弄清楚了。如果我在图像上设置此样式：

flex-shrink: 0;

然后它似乎全面工作。
http://jsfiddle.net/qgybon8q/2/

在IE11上的flex-box中，max-width无法正常工作

1 个答案: