rowspanを使用してテーブル内の奇妙な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によりサポートされ始め -接頭辞。 W3Schools Ref