有以下html代码：

 <ul>
    <li>
        <span>aaaaaaa</span>
        <i class="delete"></i>
    </li>
    <li>
        <span>bbbbbbb</span>
        <i class="delete"></i>
    </li>
</ul>

css代码如下：

 ul
    padding: 15px
    font-size: 0
    width: 857px
    border: 1px solid $color-background
    li
        position: relative
        display: inline-block
        width: 80px
        height 24px
        line-height: 22px
        border: 1px solid #e4e4e4
        border-radius: 2px
        padding: 0 5px
        background-color: #f5f9ff
        font-size: $font-size-medium
        &:nth-child(9n+1)
            margin-left: 0
        .delete
            position: absolute
            display: inline-block
            width: 12px
            height: 12px
            right: -(@width/2)px
            top: -(@height/2)px
            background: url("./close.png") center no-repeat
            background-size: contain
            background-color: $color-background-blue
            border-radius: 50%
            cursor: pointer
        & + li
            margin-left: 15px
        span
            display: inline-block
            width: 100%
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis
            

在chrome中看到ul高度为74，但是li的高度只有24，请问是什么原因呢？