内側容器IE11

Question

に親の上部を浮動

I次のマークアップがあります。

<div class="bottombar"> 
    <div class="outercontainer"> 
     <div class="container"> 
      <div class="devider"> 
       <p class="toptitle">dis-rupt-ifi</p> 
       <p class="pheader-sub">disrpt/<br /><em>verb</em></p> 
      </div> 
      <div class="pheader"> 
       We solve problems using design and technology.<br> we help and businesses consume data.<br> We use data design to drive your bottom line. 
      </div> 
     </div> 
    </div> 

</div> 

とCSS：

.bottombar{ 
    background-color: #475A54; 
    padding: 0px 0 100px 0; 
} 

.outercontainer { 
    display: flex; 
    margin: 0 auto; 
} 

.container { 
    margin: 0 auto; 
} 


.devider{ 
    float: left; 
    border-right: 2px solid #FFF; 
    padding-right: 90px; 
} 

.pheader{ 
    text-transform: none !important; 
    text-align: left !important; 
    letter-spacing: 0 !important; 
    padding-left: 400px; 
    line-height: 1.8; 
} 


@media screen and (max-width: 980px){ 
    .container { 
     margin-left: 50px; 
    } 
    .devider{ 
     float:none; 
     border-right: none; 
    } 
    .pheader{ 
     padding-left: 0; 
     font-size: 32px; 
    } 
} 

@media screen and (max-width: 736px){ 
    .pheader{ 
     padding-left: 0; 
     font-size: 16px; 
    } 
} 

これは、それがChromeでレンダリングされます。

を

これはIE11にあります：

私の人生では、これがIEで正しく動作するようにすることはできません。任意のヒントやポインター？ありがとう:)

PS - これは、このレイアウトを実行するための最良の方法ではないことを知っています、これは私がクライアントサイトで解決する必要があるちょっとした問題です。だから、唾を吐くとダックテープ！

Answer 1

IE11でdisplay: flexがサポートされていないためです。 caniuse.com

Answer 2

あなたのスクリーンショットではブラウザの幅が< 980pxのIEブラウザを使用してレンダリングしていますが、Chromeではブラウザの幅が980pxを超えると思われます。 ブラウザの幅を同じになるように変更してください。 つまり、ブラウザの幅が980px未満で、応答速度が736px未満の場合は、反応的なCSSが蹴飛ばされるため、Chromeブラウザを絞り込んだ場合でも同じ結果が得られる可能性があります。