使用rowspan在表中绝对居中的奇怪IE位置

Question

在使用rowspan时，我在使用InternetExplorer上的表中项目时遇到问题。

我使用的位置绝对前50％，转换：translateY（-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 上与我合作，检查您的IE版本为转换 CSS属性开始受 IE 9.0 支持使用 -ms - 前缀。 W3Schools Ref