로우 스팬을 사용하는 테이블에서 이상한 IE 위치 절대 센터링

Question

rowspan을 사용할 때 InternetExplorer의 테이블에 항목을 센터링하는 데 문제가 있습니다.

위치 절대 상단 50 %, 변환 : 변환 Y (-50 %)를 가운데로 사용 중입니다. 그러나 결과는 이상합니다. 이것은 rowspan을 사용하는 IE에서만 발생합니다. 어떤 아이디어가 왜, 어떻게 고쳐야합니까?

th, td { 
 
    position: relative; 
 
    border: 1px solid red; 
 
    padding: 0 25px; 
 
} 
 

 
.sortable { 
 
    background-image:url('https://imageog.flaticon.com/icons/png/512/25/25243.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    height: 10px; 
 
    width: 10px; 
 
}

<table> 
 
    <tr> 
 
    <th rowspan=2> 
 
     first 
 
     <span class="sortable"></span> 
 
    </th> 
 
    <th rowspan=2>second</th> 
 
    <th colspan=2>first</th> 
 
    </tr> 
 
    <tr> 
 
    <th>one</th> 
 
    <th>two</th> 
 
    </tr> 
 
</table>

Answer 1

귀하의 코드는 IE 10.0에 저와 함께 일하고있다가, CSS 속성을 변환 로 IE 버전을 확인하는 것은 IE -ms의 사용과 9.0에 의해 지원되기 시작 - 접두어. 당신이 jsfiddle 버전을 구축 할 수 있습니다 가능하면 W3Schools Ref