html - 内部容器在 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