除了Opera之外，每个浏览器上的图像链接几个像素

Question

我遇到了the site我遇到的问题。

顶部徽标似乎有一些顶部边缘，即使我已经专门设置它没有边距而且它的父母没有填充。

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-align的内容，也可以使用以下方法进行补偿。

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

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

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

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

Answer 2

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

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

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

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