爲什麼Chrome以這種方式渲染這個CSS

Question

我試圖用CSS中的i圖標創建一個圓圈。但是，當第一次渲染頁面時，該圓形看起來像是一個倒置的蛋，並略微覆蓋了它周圍的邊框。 （放大瀏覽器查看更多細節問題）

棘手的部分是，如果您打開開發工具並更改任何與其位置（寬度，高度，無論什麼）有關的值，一切都會恢復正常，它會變成一個圓圈。

https://jsfiddle.net/2yjashje/

<div class="round-egg"> 
    i 
</div> 


.round-egg { 
    font-size: 14px; 
    background: white; 
    color: #8DC641; 
    border-radius: 10px; 
    cursor: help; 
    border-bottom: none !important; 
    border: 4px solid #8DC641; 
    width: 20px; 
    height: 20px; 
    text-align: center; 
} 

這到底是怎麼回事？

Answer 1

我把字母「i」放在自己的範圍內，並增加了從頂部到垂直居中的邊距。至於圓圈，我修改了border-radius屬性，然後刪除了border-bottom：none;財產也是如此。假設你想要一個圓圈，你需要底部邊框。

https://jsfiddle.net/2yjashje/3/

<div class="round-egg"> 
    <span class="icon">i</span> 
</div> 

.round-egg { 
    font-size: 14px; 
    background: white; 
    color: #8DC641; 
    border-radius: 30px; 
    cursor: help; 
    border: 4px solid #8DC641; 
    width: 20px; 
    height: 20px; 
    text-align: center; 
    display: table-cell; 
} 
.icon { 
    display: block; 
    margin-top: 2px; 
}