0

我想让这些“i”图标之一出现在我网站上的名称旁边，以便人们可以单击它并查找更多信息。我有这个 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/。它似乎也没有出现在名称旁边，但也许这是一个单独的问题。

4

2 回答 2

1

那是因为在高度计算中box-sizing: border-box包括 theborder 和 the 。padding

这意味着如果您使用height: 30pxand创建一个元素padding-top: 5px，它将是 35px 高（高度 + 填充），但使用 setting box-sizing: border-box，它将是 30px 高。

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

width: 57px;
height: 57px;
于 2018-02-08T16:05:08.047 回答
0

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

#moreInfo {
    ...
    padding: 0;
    font: 30px Arial, sans-serif;
    ...
}
于 2018-02-08T17:08:50.640 回答