web-dev-qa-db-ja.com

フレックスアイテムが親の幅を超えていますIE

私はul > li > a > img括弧を使用し、flexboxを使用して、画像のアスペクト比を維持しながら、すべてのリストアイテムを1つの行に揃えます。

Chrome45、Firefox40、- Safari8、Opera28＆Edge ==

enter image description here

IE 10/11（enter image description here

だから私の問題は、[〜＃〜] 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より詳細な外観が必要な人のためのものです。

cssinternet-explorerinternet-explorer-10flexbox
16
Matt

変更 <img>自動から100％までの幅

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

標準を尊重しないChrome

3
romuleald

同じ問題が発生し、この修正が見つかりました。これをスタイルシートに追加するだけです。

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

これがあなたが問題を解決したい方法であるかどうかはわかりませんが、私は追加しました

li{
  height: 100%
}

そして他のいくつかのものとそれはここで働いているようです：

編集：デモを更新しました、比率はChromeとIEの場合は問題ないようです

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

0
tmvnty