居中输入元素的位置：在IE11中的绝对位置

我在理解IE11不保留文本对齐方式时遇到了一些麻烦：使用position：absolute时注意中心。我创建了一个JS小提琴。基本上我有两个复选框，我想堆叠在一个表格单元格的中心在彼此的顶部。居中输入元素的位置：在IE11中的绝对位置

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/ 这个工程在铬，但不是在IE浏览器。我正在寻找一种适用于这两种浏览器的解决方案。任何帮助表示赞赏。

来源

2017-08-15 Daniel Spence

IE浏览器，你需要使用的位置是：相对/绝对，coordonates和复位裕HTTPS： //jsfiddle.net/3f5993oc/1/ –

我知道这听起来很奇怪，为什么有人会这样做，但我有我的理由。其中一个复选框将被禁用，实际复选框将具有不透明度：0.我们使用:: before使用CSS3。这对我来说很复杂，但我试图尽可能简化这个过程，然后在此处发布意图。 –

IE浏览器，你需要使用position:relative/absolute，coordonates和复位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>

来源

2017-08-15 18:06:52

居中输入元素的位置：在IE11中的绝对位置

回答

相关问题