我有一個簡單的無序列表鏈接,並使用psuedo元素爲列表創建數字。出於某種原因,在IE11中,我無法讓數字垂直居中在它的圓形背景中。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中的數字:
在其他所有瀏覽器中的數字:
任何方式你湊ld在js.fiddle中重現或提供更多的scss代碼? – crazymatt