Question

我有一个ul > li > a > img括号，并使用 flexbox 将所有列表项对齐到一行，同时图像保持其宽高比。

Chrome 45 ， Firefox 40 ， Safari 的内容 8 ， Opera 28 ＆amp;的边线

IE 10/11 中的内容

所以我的问题是我试图在 IE 中实现与 Chrome和Firefox 中相同的行为。

我的 SASS / SCSS

ul.images {
  float: left;
  clear: both;
  width: 100%;
  min-height: auto; // Required for Firefox
  padding: 0;
  margin: 0;
  border: 1px solid yellow;

  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: -ms-flexbox;
  -ms-flex-direction: row;

  display: flex;
  flex-direction: row;

  li {
    border: 2px solid green;
    flex: 1 1 auto;
    width: auto;
    min-width: 0; // Required by Firefox
    max-width: 100%;
    max-height: auto;

    img {
      float: left; // Removes phantom margin
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 100px;
    }
  }
}

对于想要更详细外观的人来说，这是 CodePen 。

Answer 1

Change the <img> width from auto to 100%

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100px;
}

It seems that's Chrome who doesn't respect standard

Answer 2

不确定这是否是您想要解决问题的方式，但我已添加

li{
  height: 100%
}

以及其他一些事情似乎在这里工作：

编辑：更新了演示，Chrome和IE的比率似乎很好

http://jsfiddle.net/uf30wuwz/3/

Answer 3

我遇到了同样的问题，发现了这个问题，只需将其添加到您的样式表中：

*{
min-height: 0;
min-width: 0;
}

Answer 4

最简单的解决方案：添加＆＃39;溢出：隐藏＆＃39;上课＆＃39; .images ＆＃39;

评论者：

是的，伙计们，错过了那个，对不起。 @mathijs，技术上是正确的，但CSS充满了黑客攻击（需要）。例如，考虑一下clearfix hack，它现在看起来很普通。

但在这种情况下，主容器的最大宽度为500px时，如果缩放图像宽度的总和不适合图像容器，则隐藏溢出似乎是最佳选择。这是一种或两种情况。

BTW：Chrome与W3C规格的关系不如FF（DE 42+），我选择开始使用FF进行初始测试，然后在Ch中测试以检测怪癖。我打赌Ch内部隐藏溢出。

@Matt，我坚持溢出：隐藏＆＃39;解决方案，在一个更大的项目中，它是相当微不足道的，并且可以胜任。

我在想，你真的需要 ul / li ??通过对代码的一些重新设计，它变得不那么复杂和简洁，看看：

@Matt再次：显然当他们的容器有一个固定的宽度时，Ch会削减过多的元素数据，就像你的那样，而FF和IE希望你告诉他们该如何处理它（W3C）。我改变了班级＆＃39;重新图像＆＃39;来自＆溢出：隐藏＆＃39; to＆＃39; overflow-x：scroll; overflow-y：hidden＆＃39;，现在你可以看到为什么你需要做一些溢出。

问题的根源在于您希望图像很好地对齐 AND 具有适当的缩放比例（就像我一样）。但是得到的图像宽度的总和大于500px（减去边距等），所以类＆＃39;图像＆＃39;满溢了。您根本无法将600px放入500px的容器中并保持纵横比。您将不得不做一些切割或删除主容器的宽度约束（删除宽度：500px）。正如我之前所说：或者......或者......

＆＃13;

.rew-container {
  float: left;
  width: 500px;
  border: 2px solid black;
  padding: 15px
}
.rew-images {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid red;
  overflow-x: scroll; overflow-y: hidden
}
.rew-images img {
  min-width: 100%;
  max-width: 100%;
  width: auto;
  max-height: 100px
}
.rew-images a {
  flex: 1 1;
  border: 2px solid green;
  max-height: 100px;
}

＆＃13;

<div class="rew-container">
  <div class="rew-images">
    <a href="http://4.bp.blogspot.com/-q8j1nkqwHnE/Tsbs1isbCTI/AAAAAAAAAG4/mcWdJwJ5uvE/s1600/armin_van_buuren_%25282%2529_798.jpg" title="armin_van_buuren_%282%29_798.jpg">
      <img src="https://tse4.mm.bing.net/th?id=JN.d1jQ4iuFK0%2b4AkstmpzD1A&amp;pid=15.1" alt="armin_van_buuren_%282%29_798.jpg" height="168" width="300">
    </a>
    <a href="http://thegun2oo5.files.wordpress.com/2010/05/1140_armin_van_buuren.jpg" title="Armin van Buuren – the best Dj’ in the world :X:X:X">
      <img src="https://tse3.mm.bing.net/th?id=JN.RTJ8eeB%2bIMptSFcLhGpXQw&amp;pid=15.1" alt="" height="480" width="444">
    </a>
    <a href="http://thexipiron.files.wordpress.com/2012/01/armin-van-buuren.jpg" title="armin van buuren">
      <img src="https://tse2.mm.bing.net/th?id=JN.VkPvTXw%2fPEOMmOcl9smvoQ&amp;pid=15.1" alt="armin van buuren" height="360" width="480">
    </a>
    <a href="http://fondosdedj.com/wp-content/uploads/images/74/armin-van-buuren.jpg" title="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ...">
      <img src="https://tse2.mm.bing.net/th?id=JN.SvQClhGAAGcPYl1U2SZQsA&amp;pid=15.1" alt="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ..." height="315" width="480">
    </a>
  </div>
</div>

＆＃13;

Flex项目超过IE

4 个答案: