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);

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

1 个答案: