css - 将位置为 : absolute in IE11 in a table 的输入元素居中

Question

我无法理解为什么 IE11 在使用 position: absolute 时没有记住 text-align: center。我创建了一个 JS fiddle 。基本上我有两个复选框，我希望它们在表格单元格的中心相互堆叠。

table {
  width:100%;
  height: 50px;
  text-align: center;
}

#box1 {
  position: absolute;
}

<table>
<tr>
  <td>test</td>
  <td>
    <input id="box1" type="checkbox">
    <input id="box2" type="checkbox">
  </td>
  <td>test</td>
</tr>
<tr>
  <td>test</td>
  <td>test</td>
  <td>test</td>
</tr>
</table>

https://jsfiddle.net/3f5993oc/这适用于 chrome，但不适用于 IE。我正在寻找一种适用于两种浏览器的解决方案。感谢您的帮助。

Answer 1

对于IE，你需要使用position:relative/absolute，坐标和重置margin

table {
  width: 100%;
  height: 50px;
  text-align: center;
}

td {
  position: relative;
}

#box1 {
  left: 0;
  right: 0;
  margin: 0.175em auto;
  position: absolute;
}

<table>
  <tr>
    <td>test</td>
    <td>
      <input id="box1" type="checkbox">
      <input id="box2" type="checkbox">
    </td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>