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

Question

我有一个简单的无序列表，我正在使用伪元素为列表创建数字。由于某些原因，在 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

我用你的代码做了一个 fiddle：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);
        }
    }
}

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

Number overflowing from list item pseudo element in IE11

css

internet-explorer

internet-explorer-11