【发布时间】：2011-07-16 23:48:38
【问题描述】：
我在网页上有一张背景图片，我将一张图片放在我的身体中以与图片对齐：
这是我的 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 中对齐，它们显然看起来与其他浏览器不一致。
对可能导致这种差异的原因有何建议？
【问题讨论】：
-
您指定了 DOCTYPE 吗？
-
为 FF 和 Chrome 修复它并使用条件 cmets 来定位 IE。
-
您必须做错某事才能获得这些结果。 Chrome 和 Firefox 应该使用类似的普通 CSS 相互匹配。你能在JS Bin 上重现问题吗？
-
@ooo：真正的调查方法是我们是否有图像工作的实时代码。正如@thirtydot 所建议的那样：如果你能做一个活生生的例子，那将对我们有很大帮助。
-
@Jawad: 建议为 Firefox 和 Chrome 修复它并为 IE 使用 conditional cmets 作为第一个建议似乎是一个非常糟糕的主意 - 在看到代码之后，有可能它可能最终成为最好的方法，但在我看来，它甚至不像是需要条件 cmets 的情况。它们可能有助于解决症状，但解决问题比解决症状要好得多。