以位置居中输入元素：IE11中的绝对值在表格中答案

【问题标题】：Centering input element with position: absolute in IE11 in a table以位置居中输入元素：IE11中的绝对值在表格中
【发布时间】：2017-08-16 02:15:25
【问题描述】：

我在理解为什么 IE11 在使用 position: absolute 时没有记住 text-align: center 时遇到了一些麻烦。我创建了一个 JS 小提琴。基本上我有两个复选框，我想在表格单元格的中心堆叠在一起。

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。我正在寻找一种适用于两种浏览器的解决方案。任何帮助表示赞赏。

【问题讨论】：

对于IE，需要使用position:relative/absolute，坐标和reset margin jsfiddle.net/3f5993oc/1
我知道为什么有人会这样做听起来很奇怪，但我有我的理由。其中一个复选框将被禁用，实际的复选框将具有不透明度：0。我们使用 CSS3 使用 ::before。这对我来说很复杂，但我尽量简化了这一点，然后再在这里发布意图是什么。

标签： css internet-explorer-11

【解决方案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>

【讨论】：