web-dev-qa-db-ja.com

IE11 flexboxテキストの折り返しを防止しますか？

Firefox/SeaMonkey/Chromeの最新バージョンでOKを表示するサイトを開発していますが、興味深いことにIE11にはレンダリングの問題があります。
http://devel.gooeysoftware.com/mozaddons/switching.php

これをIE11にロードすると、左側の[FirefoxからSeaMonkeyへの切り替え]メニュー項目のテキストは、含まれているDIVのサイズに折り返されず、代わりにオーバーフローします。なぜなのかわかりません。 IE11の単なるバグですか、それともラップするためのCSSが不足していますか？

彼らはIE11の束を修正したようですflexbox Edgeのレンダリングバグ。

IE11：
IE11 rendering

縁：
Edge rendering

cssflexboxinternet-explorer-11
25
Jez

私の知る限り、IEのflexbox実装は壊れています。これはこの質問に対する長い答えと短い答えです。テキストは折り返す必要がありますが、そうではありません。Firefoxとクロム。

更新：

IE11のflexbox実装は確かに壊れていました。これはEdgeで正しくレンダリングされるようになりました。

7
Jez

Flexboxバグリポジトリでこの簡単な修正を見つけました：

/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
*    overflow.
* 2. Set `box-sizing:border-box` if
*    needed to account for padding
*    and border size.
*/

.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
}

Flexboxバグリポジトリ

23
MsMaryMak

私は同様の問題に遭遇し、IE11では構文を使用する必要があることがわかりました：

flex: 1 1 auto;

のではなく：

flex: 1;

このGithubコミットのおかげ： https://github.com/philipwalton/solved-by-flexbox/pull/8/files

8
Steve Farthing

max-width要素にwidthまたはdisplay: flexを明示的に設定し、テキストをラップする必要がある子を明示的に設定することにより、IE10および11でテキストを適切にラップすることができました。

.flex-fix {
  display: flex;
  flex-wrap: wrap;
}

.flex-fix,
.flex-fix > * {
  max-width: 100%;
}

これが Codepenデモ です。

7
shshaw

このペンは役に立ちますか？これが私がie11の回避策を提供しているものです。

http://codepen.io/dukebranding/pen/vLQxGy

p {
    /* Wrap the child text in a block tag, add the following styles */
    display: flex;
    width: 100%;
}
3
isralCDuke

この問題は、overflow: hiddenをflexアイテムに追加することで解決しました。

ただし、これによりすべての子要素がオーバーフローすることも防止されるため、フレックスアイテム内でツールチップやポップオーバーを使用している場合は、悪い解決策になる可能性があります。

1
envic

Pykoのおかげで、次のクラスをflexの通常のオーバーフロールールを実行していないものの親に追加します。

.ie-dont-overflow {
  -ms-overflow-x: hidden;
  -ms-overflow-y: hidden;
}

なぜこれが機能するのか私にはわかりません。 IE吸う...

0
Garrett

このバグのバージョンに遭遇しました。この場合、フレックスアイテム内のテキストが折り返されず、この問題を修正したのは、フレックスアイテム内のテキストを<span>要素。テキストノードは、フレックスアイテムの直接の子孫ではありません。これにより、他のブラウザと同じように、IE11でテキストを折り返すことができました。

これは、この質問の isralCDukeの回答 と同様の理由で機能すると思いますが、追加のCSSルールが含まれていないため、少し単純に見えます。

0
Nick F