html - 你如何解决 IE、Firefox 和 Chrome 之间的这种不一致

Question

我在网页上有一张背景图片，我正在我的 body 中放置一张图片以在图片上对齐:

这是我的CSS:

背景:

body {
 font: 12px tahoma, Arial, Helvetica, sans-serif;
 line-height: 1.5em;
 margin: 0px;
 padding: 0px;
 color: #241a10;
 background:#c9e4ec url(/Content/images/myImage.gif);
}

图片:

#leftSideContainer {
    position:relative;
    margin-top:-47px;
    width:147px;
    height:93px;
    background:url(/Content/Images/image2.gif);
}

在 IE7 和 Chrome 中，它看起来很完美并且排列准确:

但在 IE8 和 Firefox 中，图像显示比背景图像低一点:

如果只是旧版本的 IE 坏了我不会在意，但在这种情况下 firefox 也坏了。

我试过玩:

 margin-top: -47px;

但如果我将它移高以使其在 firefox 中对齐，它们显然看起来与其他浏览器不对齐。

对于可能导致这种差异的原因有什么建议吗？

Answer 1

CSS 重置是你的 friend

http://meyerweb.com/eric/tools/css/reset/

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.