居中輸入元素的位置：在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中的絕對位置

回答

相關問題