Question

我在IE11上遇到了与flexbox有关的问题，虽然我知道有很多已知问题，但我还没有找到解决方案......

<div class="latest-posts">
    <article class="post-grid">
        <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
        <div class="article-content">
             <h2>THIS IS POST TITLE</h2>
             <p>BLAH</p>
        </div>
    </article>
</div>

CSS ......

img {
  max-width: 100%;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
.article-content {
  padding: 20px 35px;
}

图像在弹性容器内拉伸。

应用align-items: flex-start（我认为，因为＆＃34;拉伸＆＃34;是默认值...）或justify-content: flex-start似乎无效。

Codepen：example of what I mean

我做错了什么？

Answer 1

为了避免这种有趣的行为，您可以重置flex-shrink属性。

这看起来像一个bug，尽管微软说：

<'flex-shrink'>

设置弹性项目的弹性收缩因子或负弹性。弹性收缩因子决定了弹性项目相对于弹性容器中其他项目的收缩程度。

如果省略，元素的负面灵活性是＆＃34; 0＆＃34;。负值无效。

来源：https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx

img {
  max-width: 100%;
  flex-shrink: 0;
}

＆＃13;

img {
  max-width: 100%;
  flex-shrink: 0;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
article.post-grid .article-content {
  padding: 20px 35px;
}

＆＃13;

<div class="latest-posts">
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>THIS IS POST TITLE</h2>
      <p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
      <p>Recommend new contented intention improving bed performed age.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>SHORT TITLE</h2>
      <p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
    </div>
  </article>
</div>

＆＃13;

http://codepen.io/anon/pen/KzBOvq

Answer 2

我在横轴上有图像拉伸（拉伸高度，使用flex-direction：row）。

这个stackoverflow Q / A帮助我解决了这个问题：

Link here

我必须在我的img上设置以下css：

align-self: flex-start;

根据您的目标，您可能需要另一个值而不是flex-start ofcourse。我的意思是把我的形象放在行的顶端。

Answer 3

我在IE11中有一个类似的错误。样式取自Bootstrap 4.1，因此对于流畅的图像，我有：

.img-fluid {
    border: none;
    height: auto;
    max-width: 100%;
}

在我的情况下，原因似乎在max-width: 100%中，所以当我将其更改为width: 100%时，该错误消失了：

.img-fluid {
    border: none;
    height: auto;
    width: 100%;
}

此解决方案并不适合每个人的情况，但我希望它会有所帮助。

Answer 4

我在这里尝试了所有解决方案，但没有任何效果。我使用flexbox的唯一目的是在悬停另一个图像时将显示的图像垂直居中。因此，我只是使用了更经典的解决方案àla top: 50%; transform: translateY(-50%)，然后就可以了。因此，基本上根本不使用flexbox。.#hateIE

Answer 5

我在IE11中遇到了拉伸产品图片的问题，我做了一些研究并尝试了不同的方法。

这是我的代码：

.productImage {
    position: relative;
    overflow: hidden;

    img {
        position: absolute;
        display: block;
        height: 100%;
        object-fit: contain;
        top: 0;
    }
}

然后我意识到我的图像height: 100%是拉伸图像的罪魁祸首，我只是移开了身高，但是我的图像位于.productImage容器的顶部，而不是垂直居中。我在这里介绍了flex，并通过一个简单的align-items: center对其进行了定位，但这当然在IE11中不起作用。我也尝试过flex-shrink: 0，但是那也不起作用。

然后我继续跳过使用flex并尝试了经典的top: 50%; left: 50%; transform: translate(-50%, -50%);，但这也不好，因为我已经使用了变换来缩放图像上的悬停效果。

我最终得到了这个解决方案：

.productImage {
    position: relative;
    overflow: hidden;

    img {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
}

它就像一个魅力

Answer 6

在我的案例中，G-Cyr建议的“ flex-shrink：0”和Rick Schoonbeek建议的“ align-self：flex-begin”的组合可以解决问题。我有一个包装器，该包装器使用伸缩框将图像的居中位置与“ justify-content：center;”

在IE 11，Chrome和Safari中，一切都很好，但IE Edge无法正确显示。在图像上添加两个属性可以解决IE Edge的问题。

IE11上的Flexbox：图像无缘无故延伸？

6 个答案: