html - 自动流不适用于 IE 中的绝对定位 div

Question

我正在尝试构建一个时间线来显示一系列事件，时间线中可能添加了很多事件，因此它的容器设置为自动流，出于视觉目的，我在这里有代码:http://codepen.io/tomevans1664/pen/QyLObL .这在 chrome 中一切正常，但在 IE 中，垂直时间轴栏不受溢出限制。

HTML:

    <div class="center">
        <div class="timeline">
            <div class="line">
            </div>
            <div class="content"></div>

        </div>
    </div>

CSS:

body{
    margin: 0;
    padding: 0;
}
.center{

    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 500px;
    border: 1px solid #dddddd;
    overflow-y: auto;
    overflow-x: none;
}
.line{
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 5px;
    background: #d7e4ed;
}
.content{
    height: 1000px;
}
.timeline{
    position: relative;
    width: 100%;
    min-height: 50px;
}

IE 截图: http://imgur.com/0pUVtOi

Answer 1

因此对于 IE 来说，要溢出绝对定位的内容，具有 overflow 属性的包含 div 也必须使用绝对定位，尽管这确实会破坏自动边距。

为了让 .center 再次居中，我使用了:

left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);