2017-05-17 4 views
0

私はかなりシンプルなレイアウトだと思っていますが、ie11ではレイアウトラップが機能していないようです。このcodepenをチェックアウト、またはちょうど考慮し、次のコード:layout-wrap(角素材)ie11でラップしない

<div layout="row"> 
    <div layout="column"> 
     <div layout="row" layout-wrap> 
      <div>lorem ipsum dolor sit amet</div> 
      <div>lorem ipsum dolor sit amet</div> 
      <div>lorem ipsum dolor sit amet</div> 
      <div>lorem ipsum dolor sit amet</div> 
     </div> 
    </div> 
</div> 

をそのHTML、Chromeで、予想されるように、エッジが折り返されますが、IE11はしません。一番外側のコンテナ(行)を削除すると、ie11が期待通りに機能します。そのコンテナはなぜ違いますか?誰も私がどのようにその行を削除せずにそれらのアイテムをラップするie11を強制することができます考えている?

答えて

1

もっと掘り下げて実験した後、これは角度のある材料とはまったく関係がなく、IE11ではちょっと変わった動作であることが明らかになりました。私は明確にcssで問題を再現できました。ここでは、このCodePenをチェックアウトするか、このHTMLを考えてみましょう。私は角素材を伴わなかった答えを検索してみましたら

<div style="display: flex;flex-direction: row;"> 
    <div style="display: flex;flex-direction: column;"> 
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;"> 
     <div>Lorem ipsum dolor sit amet</div> 
     <div>Lorem ipsum dolor sit amet</div> 
     <div>Lorem ipsum dolor sit amet</div> 
     <div>Lorem ipsum dolor sit amet</div> 
     <div>Lorem ipsum dolor sit amet</div> 
    </div> 
    </div> 
</div> 

ソリューションは、SO同様に、ここで見つけることは非常に簡単でした。基本的には、flex-wrapが指定されているコンテナのコンテナ(上記の例の列)に指定された幅を持つ必要があるようです。これは、width:100%、または角度のある素材ではflex = "100"、その他の小さなトリックでも可能ですが、とにかく、ラップされた子を含む要素ie11でその要素を幸せに外に出すでしょう。どのように悪化。

関連する問題