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

Question

我弄清楚为什么我的网站上的图标没有对齐，因为它在使用相同CSS和源文件的其他页面上没有对齐。

以下是所有浏览器中表现奇怪的地方：http://igpmanager.com/account “home”的图标（网站徽标下方的左上角）由于某种原因与其容器的顶部对齐。

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

造成这种情况的原因是什么？我已经非常彻底地找到了答案，但没有找到任何运气。

Answer 1

实际上一切都是顶部对齐的，文本降低的原因是因为你设置了

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

将文字向下推，但行高对图像定位没有影响。您最好删除行高声明并添加填充顶部，并减少元素的高度以补偿

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