将输入元素置于表格

Question

我在理解IE11为什么不保持text-align时遇到一些麻烦：使用position：absolute时要记住。我创造了一个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。我正在寻找适用于这两种浏览器的解决方案。任何帮助表示赞赏。

Answer 1

对于IE，您需要使用position:relative / absolute，协调并重置margin

＆＃13;

＆＃13;

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

td {
  position: relative;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;