IE11中的max-width和flex不起作用

时间:2018-07-01 20:16:51

标签: html css css3 internet-explorer flexbox

我在IE11中使用弹性框和最大宽度时遇到问题。 我确实在网上搜索,但看到了一些解决方案,但是没有一个对我有用,这就是为什么我发布了一个新主题。 这是我的代码:

.story-img {
  padding: 0px 0px 6px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex:1;
}

.story-img img {
  cursor: pointer;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}

.row {
  width: 100px;
}
<div class="row">
  <div class="col-xs-12 story-img">
    <div>
      <img class="img-responsive11" alt="" src="https://s3.amazonaws.com/resized.images.stg1.telegraphjournal.com/251861/desktop/comey-mob-analysis-56581436-3f0b-11e8-a7d1-e4efec6389f0.jpg">
    </div>
  </div>
</div>

因此,如您所见,我正在使用最大宽度来控制较大尺寸的图像。 它适用于除IE(我使用IE11)以外的所有浏览器。 这是codepen示例: https://codepen.io/hminaee/pen/wXNjBK#code-area

你能帮我吗?

1 个答案:

答案 0 :(得分:0)

在这种情况下,我认为您唯一缺少的就是图像div父级的宽度限制。

只需将其添加到您的代码中即可:

.story-img > div { width: 100% }

revised codepen