元素位置因Chrome和Firefox而异

Question

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

在Firefox和Chrome（或Safari而非Chrome）中打开我的jsfiddle。如果仔细查看字母“y”，可以看到在Firefox中，section1-div的字母和下边框之间有一个或两个额外的像素，而其他两个像素中的一个。

我已将大多数元素的填充和上边距/下边距设置为0px，以便将样式重置为som范围。

为什么这样做以及我应采取什么措施来防止这种情况？

更新：使用Chrome 17.0.963.56，FF 11和Mac。

Answer 1

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

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

@-moz-document url-prefix() {

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

}