为什么图标图像与容器顶部对齐？ （网页链接）

Question

我很难弄清楚为什么我网站上的图标与使用相同 CSS 和源文件的其他页面上的图标不一致。

这是它在所有浏览器中表现异常的地方：http://igpmanager.com/account 出于某种原因，“主页”图标（网站徽标下方的左上角）与其容器顶部对齐。

然而，它与此页面共享完全相同的 HTML/CSS 源（据我所知）：http://igpmanager.com。然而，此页面上的相同图标与其容器的中间对齐。这也是我希望它出现在 /account URL 上的位置。

这是什么原因造成的？我已经非常彻底地寻找答案，但没有找到答案。

Answer 1

其实一切都是上对齐的，文字下降的原因是因为你设置了

#nav a, #nav a:visited, #nav a:active {
...
line-height: 26px;
...
}

这会将您的文本向下推，但行高对图像定位没有影响。您最好删除 line-height 声明并添加 padding-top ，并减少元素的高度以补偿

#nav a, #nav a:visited, #nav a:active {
    display: block;
    background-color: #33383F;
    color: #B3B6BF;
    height: 18px;
    padding: 4px 12px;
    text-decoration: none;
    font-weight: normal;
    border: 1px solid #4D545F;
    border-bottom: none;
    border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    word-wrap: break-word;
}