某些元素在不同的浏览器中显示不同

Question

创建图标时遇到以下问题：

https://jsfiddle.net/522r16jk/

在不同的浏览器中显示不同。 HTML

<span class="add-btn">+</span>
<span class="delete-btn">+</span>

SASS

  span{
    display: flex;
    width: 22px;
    height: 22px;
    border: 2px solid;
    font-size: 21px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    &.add-btn{
      color:$main-color;
      border-color: $main-color;
      margin-right: 10px;
      &:hover{
        color: $background-color;
        background-color: $main-color;
      }
    }
    &.delete-btn{
      color:#df4837;
      border-color: #df4837;
      transform: rotate(45deg);
      &:hover{
        color: $background-color;
        background-color: #df4837;
      }
    }
  }