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

-1

我遇到问题the site我正在处理。除Opera之外，每个浏览器上的图像链接几个像素关闭

顶部标志似乎有一些类似的边缘，尽管我已经专门设置它没有保证金，其父母没有填充。

body{ 
    margin: 0; 
    padding: 0; 

    min-width: 320px; 

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

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

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

odd margins

正如你所看到的，只有Opera似乎正常工作。现在有什么问题吗？或者它是浏览器的问题？

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

来源

2013-04-23 TheJjokerR

这本来是如果你更好给了一个问题的jsfiddle而不仅仅是一个链接到您的网站 – Andrew 2013-04-23 13:57:26

作出了一个快速jsfiddle供将来参考：http://jsfiddle.net/Jxrw7/2/ – TheJjokerR 2013-04-23 14:05:12

这里是我的更新到你的jsfiddle：http://jsfiddle.net/Jxrw7/4/你需要告诉你的图像'display：block'它摆脱了所有浏览器添加到图像的隐藏填充 – Andrew 2013-04-23 14:13:52

它是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; 
}

我向margin-top添加了-3px以强制它在Chrome中对齐。（没有在Firefox和其他测试）。

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

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

来源

2013-04-23 14:00:48 Michael

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

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

我建议设置vertical-align到top，导致：

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

来源

2013-04-23 14:01:26 Barney

非常完美，非常感谢大家！ – TheJjokerR 2013-04-23 14:03:56

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

回答

相关问题