IE11 上的 Flexbox:图像无故拉伸? [英] Flexbox on IE11: image stretched for no reason?

问题描述

我在 IE11 上遇到了 flexbox 问题，虽然我知道有很多已知问题，但我一直找不到解决方案...

<article class="post-grid"><img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt=""/><div class="article-content"><h2>这是帖子标题</h2><p>BLAH</p>
</文章>

还有 CSS...

img {最大宽度:100%；}.最新帖子 {边距:30px 自动；}文章.post-grid {宽度:375px；向左飘浮;边距:0 25px 100px 0；填充底部:20px；背景色:#fff;边框:1px 实心 #f3f3f3;边界半径:2px；字体大小:14px；行高:26px；显示:弹性；弹性:1 0 自动；弹性方向:列；justify-content: flex-start;对齐内容:flex-start；}.文章内容{填充:20px 35px；}

图像在 flex 容器中被拉伸.

应用 align-items: flex-start(我想，因为stretched"是默认值...)或 justify-content: flex-start 不似乎不起作用.

Codepen:我的意思的例子

我做错了什么?

解决方案

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

这看起来像是一个错误，尽管微软是这么说的:

<块引用>

<'flex-shrink'>

设置弹性项目的弹性收缩系数或负弹性.flex 收缩因子决定了一个 flex 项目相对于 flex 容器中的其他项目将收缩多少.

如果省略，元素的负弹性为0".负值无效.

来源: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 {最大宽度:100%；弹性收缩:0；}

img {最大宽度:100%；弹性收缩:0；}.最新帖子 {边距:30px 自动；}文章.post-grid {宽度:375px；向左飘浮;边距:0 25px 100px 0；填充底部:20px；背景色:#fff;边框:1px 实心 #f3f3f3;边界半径:2px；字体大小:14px；行高:26px；显示:弹性；弹性:1 0 自动；弹性方向:列；justify-content: flex-start;对齐内容:flex-start；}文章.post-grid .article-content {填充:20px 35px；}

<article class="post-grid"><img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt=""/><div class="article-content"><h2>这是帖子标题</h2><p>社会对它所尊重的私人小屋感到兴奋.完全由伤口开始.女孩有钱做起来还是两者兼而有之.在宣布为一起欢喜.</p>
</文章><article class="post-grid"><img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt=""/><div class="article-content"><h2>更长的帖子标题来说明高度</h2><p>推荐新的满足的意图改善床位执行年龄.</p>

</文章><article class="post-grid"><img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt=""/><div class="article-content"><h2>短标题</h2><p>Merry 一个人做它让我听歌.对不起，她那些愚蠢的火腿.在他们中没有很多.推荐新的满足意图提高床位执行年龄.改善如此陌生人资源立即向北幸福.</p>

</文章>

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

I'm having an issue with flexbox on IE11 and while I'm aware there's lots of known issue, I haven't been able to find a solution...

<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>

And the 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;
}

Images are getting stretched within a flex container.

Applying align-items: flex-start (I figured, since "stretched" is the default value...) or justify-content: flex-start doesn't seem to work.

Codepen: example of what I mean

What am I doing wrong?

解决方案

to avoid this funny behavior, you may reset the flex-shrink property.

This looks like a bug, despite what Microsoft says:

<'flex-shrink'>

Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.

If omitted, the element's negative flexibility is "0". A negative value is not valid.

Source: 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;
    }

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;
}

<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>

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

这篇关于IE11 上的 Flexbox:图像无故拉伸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！