从IE11中的列表项伪元素溢出的数字

Question

我有一个简单的无序链接列表，并使用psuedo元素为列表创建数字。由于IE11中的某些原因，我无法将数字垂直居中于圆圈背景中。

HTML：

<ul>
  <li class="list-item">
    <a>Link 1</a>
  </li>
  <li class="list-item">
    <a>Link 2</a>
  </li>  
  <li class="list-item">
    <a>Link 3</a>
  </li>
</ul>

SCSS：

.list-item {
  counter-increment: step-counter;
  margin-bottom: 1.5rem;
  color: $c-white;
  font-size: 1.4rem;
  line-height: 3.5rem;

  a {
    position: relative;
    padding-left: 3.8rem;

    &:before {
      color: $c-white;
      content: counter(step-counter);
      font-size: 1.3rem;
      height: 2.4rem;
      width: 2.4rem;
      border-radius: 50%;
      margin-right: 20px;
      position: absolute;
      left: 0;
      text-align: center;
      line-height: 2.6rem;
      top: -.5rem;
      background-color:teal;
    }
  }
}

IE11中的数字：

所有其他浏览器中的数字：

Answer 1

我用你的代码制作了一个小提琴：https://jsfiddle.net/7mwgzeba/

这是一个众所周知的错误（https://connect.microsoft.com/IE/feedback/details/776744）。在line-height属性结果中设置 rem 值始终计算为“1px”。
微软声称他们已经解决了IE11和Edge中的错误（所以在11之前的任何版本的IE中都没有修复它），但显然它仍然在那里。
使用 em 代替 rem 似乎至少在IE11中起作用。

因为它只影响伪元素，所以你可以像https://jsfiddle.net/7mwgzeba/1/

那样进行解决

每个列表项，获得一个空的范围

<li class="list-item">
    <a><span></span>Link 1</a>
</li>

... SCSS 中的样式只是移动到它：

/* ... */
a {
    position: relative;
    padding-left: 3.8rem;

    span {
        color: $c-white;
        font-size: 1.3rem;
        height: 2.4rem;
        width: 2.4rem;
        border-radius: 50%;
        margin-right: 20px;
        position: absolute;
        left: 0;
        text-align: center;
        line-height: 2.6rem;
        top: -.5rem;
        background-color:teal;

        &:before {
            content: counter(step-counter);
        }
    }
}