html - 使用 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 版本，因为 transform CSS 属性开始被 IE 9.0 支持使用 -ms- 前缀。 W3Schools Ref