html - 除 Opera 外，每个浏览器上的图像链接都少了几个像素

Question

我正在处理的网站有问题。

顶部徽标似乎与顶部有某种边距，即使我已专门将其设置为没有边距并且其父徽标没有填充。

body{
    margin: 0;
    padding: 0;

    min-width: 320px;

    background-image: url('../images/templates/background.png');

    font-family: 'Open Sans';
    font-size: 12px;
    color: #303030;
}

这是我测试的不同浏览器的图像：

如您所见，似乎只有 Opera 可以正常工作。现在有什么问题吗？还是浏览器的问题？

如果这是浏览器的问题，解决该问题的最简单方法是什么？

Answer 1

这是导致您的问题的 main.css 中的第 98 行。

.menuAvatar {
vertical-align: middle; // THIS LINE
margin: 0 5px 0 -15px;
}

删除垂直对齐后，图像会正确对齐。您可以找到不同的方式来完成您正在使用的vertical-alignfor，或者您可以使用以下方式进行补偿。

.menuAvatar {
vertical-align: middle;
margin: -3px 5px 0 -15px;
}

我将 -3px 添加到 margin-top 以强制它在 Chrome 中重新对齐。（未在 Firefox 和其他人中测试）。

或者使用它来避免负边距。

.menuAvatar {
vertical-align: top; 
margin: 0 5px 0 -15px;
}

Answer 2

在第 98 行main.css，您有以下规则：

.menuAvatar{
    vertical-align: middle;
    margin: 0 5px 0 -15px;;
}

我建议设置vertical-align为top，结果是：

.menuAvatar{
    vertical-align: top;
    margin: 0 5px 0 -15px;
}