css - 如何解决 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>作为 parent ，因为 <td> 的相对位置不能在 IE 上运行

检查更新的片段

.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;
}

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