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）。設置rem值的line-height屬性結果始終計算爲「1px」。
微軟聲稱他們解決了IE11和邊緣的問題（所以它在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); 
     } 
    } 
}