Chrome和Firefox的元素位置不同

Question

这是一个我以前曾问过的问题，但我还没有找到任何解决方案。

在Firefox和Chrome（或Safari而不是Chrome浏览器）中打开我的jsfiddle。如果仔细查看字母'y'，则可以看到Firefox和section1-div的下边框之间有一个或两个额外的像素，与其他两个像素中的其中一个相比。

我已经在大多数元素上设置了填充和边距顶部/底部为0px，以便将样式重置为一定程度。

为什么会这样，我应该采取什么措施来防止这种情况？

UPDATE：使用Chrome 17.0.963.56，FF 11和Mac。

Answer 1

我不太确定为什么会出现这个问题。它没有工作。在我自己的代码中，我可以将它与填充关联起来。 Chrome/Safari和Firefox正在以不同的方式处理填充。通过将som填充添加到标准css并为Firefox做例外，我确实得到了预期的结果。这对jsfiddle示例没有帮助（实际上可能是示例中没有任何问题，可能是字体显示有点不同，看起来像字母和边框之间有不同数量的像素...）。

#adminmenu a{ 
    padding-bottom: 2px; 
} 

@-moz-document url-prefix() { 

    #adminmenu a{ padding-bottom: 0px; } 

}