html - 为什么 chrome 以这种方式呈现这个 CSS

Question

我试图用 CSS 创建一个带有 i 图标的圆圈。然而，当页面首次呈现时，圆圈看起来像一个倒置的鸡蛋，并略微覆盖了它周围的边框。 (放大浏览器以查看问题的更多细节)

棘手的部分是，如果您打开 Dev Tools 并更改与其位置相关的任何值(宽度、高度等)，一切都会恢复正常并且会变成一个圆圈。

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;属性(property)也是如此。假设您想要一个圆圈，则需要底部边框。

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;
}