html - 显示 :table-cell 内的绝对定位

Question

在 IE11 中，第二张图片没有正确地垂直居中，而是位于 div 的顶部。

#sliderContainer #mask {
  display: block;
  width: 100%;
  overflow-x: scroll;
}

#sliderContainer content {
  position: relative;
  display: table;
  height: auto;
  width: 200%;
}

#sliderContainer content>div {
  display: table-cell;
  position: relative;
  width: 50%;
  height: auto;
  vertical-align: top;
  padding: 10px 20px;
  background-color: #54314e;
}

#sliderContainer content>div:last-child {
  background-color: #9F4585;
}

.vertical-float {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div id="sliderContainer" *ngIf="activeCircle > 0">
  <div id="mask">
    <content>
      <div>
        <div class="col-xs-4">
          <img src="http://placehold.it/350x150/ffffff/000000" />
        </div>
      </div>
      <!--
        -->
      <div>
        <div class="vertical-float">
          <img src="http://placehold.it/350x50/ffffff/000000" />
        </div>
      </div>
    </content>
  </div>
</div>

为什么会这样？就好像它不知道如何计算相对于其包含的 div 高度的顶部位置。

Answer 1

非常奇怪，这是通过删除包含的 div 元素的相对定位来解决的。在本例中，它位于 #sliderContainer content > div 上。

#sliderContainer #mask {
  display: block;
  width: 100%;
  overflow-x: scroll;
}

#sliderContainer content {
  position: relative;
  display: table;
  height: auto;
  width: 200%;
}

#sliderContainer content>div {
  display: table-cell;
  /*position: relative;*/
  width: 50%;
  height: auto;
  vertical-align: top;
  padding: 10px 20px;
  background-color: #54314e;
}

#sliderContainer content>div:last-child {
  background-color: #9F4585;
}

.vertical-float {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div id="sliderContainer" *ngIf="activeCircle > 0">
  <div id="mask">
    <content>
      <div>
        <div class="col-xs-4">
          <img src="http://placehold.it/350x150/ffffff/000000" />
        </div>
      </div>
      <!--
        -->
      <div>
        <div class="vertical-float">
          <img src="http://placehold.it/350x50/ffffff/000000" />
        </div>
      </div>
    </content>
  </div>
</div>