为什么"box-sizing“属性不显示我的"i”图标？

Question

我想让其中一个“我”图标出现在我的网站名称旁边，这样人们就可以点击它并查找更多信息。我有这个HTML

<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>

和下面的样式

#personName {
        display: block;
}

#moreInfo {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 36px;
    height: 36px;
    padding: 8px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 32px Arial, sans-serif;
    font-weight: bold;
    font-style: italic;
    display: inline-block;
}

问题是我也有这种风格

* {
    box-sizing: border-box;
}

在我的网站上，我需要很多其他的元素，但它似乎抛弃了我的"i“图形的显示方式-- https://jsfiddle.net/ds9sqr0y/。它似乎也没有出现在名字的旁边，但也许这是一个单独的问题。

Answer 1

这是因为box-sizing: border-box在高度计算中同时包括了border和padding。

这意味着如果你用height: 30px和padding-top: 5px创建一个元素，它将是35px高(高度+填充)，但通过设置box-sizing: border-box，它将是30px高。

在您的特定情况下，您可以将高度和宽度增加到以下值，使其看起来像您想要的那样：

width: 57px;
height: 57px;

Answer 2

根据Jesse de Bruijne的回答，您可以将#moreInfo选择器中的padding属性设置为0。如果可以，试着减小i的字体大小，以便更好地定位它(我使用的是Chrome)。将其设置为30px似乎更好地显示了它。

#moreInfo {
    ...
    padding: 0;
    font: 30px Arial, sans-serif;
    ...
}