内部容器在IE11上漂浮在父级的顶部

Question

我有以下标记：

<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

我认为这是因为在您的屏幕截图中，您使用IE浏览器使用浏览器的宽度＆lt;＆lt; 980px，而在Chrome中，您的浏览器宽度为＆gt; 980px。 尝试调整浏览器的宽度，使它们相同。 也就是说，如果缩小Chrome浏览器，也可能得到相同的结果，因为如果浏览器的宽度小于980px，则响应式css会被推出，而当浏览器的宽度小于736px时，则会有另外一个。