如何解决IE错误，它无法正确的父级内部没有固定大小的绝对中心元素？

Question

我遇到了IE11的问题（也许还有其他的IE），如果父级没有固定的大小，则居中的元素（使用绝对位置方法）定位不正确。大小由内容决定。

是否有任何已知的解决方法？

示例：

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;
    margin:auto;
    height:20px;
    width:20px;  
    background-color:#000;
}

.container{
    position: relative;
    background:red;
    padding-left:100px;
 }

<table>
  <tr>
    <td class="container">
      <div class="box">
      </div>
    </td>
    <td>
      Some content Some content Some content Some content Some content <br>
      Some content Some content Some content Some content Some content <br>
      Some content Some content Some content Some content Some content <br>
      Some content Some content Some content Some content Some content <br>
    </td>
  </tr>
</table>

Answer 1

您应该使用<div>作为父级，因为<td>的相对位置不会在IE上工作

检查更新后的代码段

＆＃13;

＆＃13;

.bg {
  background: red;
}

.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  height: 20px;
  width: 20px;
  background-color: #000;
}

.container {
  position: relative;
  padding-left: 100px;
}

＆＃13;

<table>
  <tr>
    <td class="bg">
      <div class="container">
        <div class="box">
        </div>
      </div>
    </td>
    <td>
      Some content Some content Some content Some content Some content <br> Some content Some content Some content Some content Some content <br> Some content Some content Some content Some content Some content <br> Some content Some content Some content
      Some content Some content <br>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;