html - 图片在 Firefox 和 IE 中的位置不同

Question

我有大约 5 张图片 - 最上面的 2 张在两种浏览器中都显示良好，但是另外 3 张的 top 差异为 100 像素。奇怪的是，格式几乎相同，除了第一张图片有 top:-15px，第二张图片有 top:-40px 而其他 3 张图片有top:-60px

为了在 FF 中修复它，我不得不使用 Underscore Hack，但我不太喜欢那样。 (编辑: 刚刚发现这样做也会在 IE 中造成困惑，该死的......)

<img src="Images/screenshot3.png" class="screenshot" style="top: 40px;_top:-60px;" />

Firefox (v4) 显示最后 3 个图像，top 属性为 -100px - 除了使用“hacks”之外，还有其他解决方法吗？

这是 screenshot CSS 类，以备不时之需:

#content-benefits .screenshot
{
    float: right;
    left: -170px;
    position: relative;
    padding:0;
    margin: 0;
}

编辑:这是我的页面:http://xskysoftware.com/clickbank/affiliates/

Answer 1

如果安德鲁(对 OP 的第一条评论)是对的，我相信他是对的，那么您需要以不易确定的方式重写大量 CSS，以避免使用“hack”。

我没有理由不做你已经做过的事情并继续使用它(除了如果你删除在未来某个日期将它向下推的边距底部，你的布局将对 IE 用户中断你可能不明白为什么。)

第三种选择是(而不是使用下划线技巧)使用条件注释，例如:

<!--[if gte IE 7]>
//stuff
<![endif]-->

这是 IE 的一个特性，而不是利用一个 bug，它可能不会让你反感。但是，它并没有缓解使您的 CSS 不够统一并因此变得更加脆弱的问题。

如果您向我们发送您作品的链接，您当然有机会获得更具体的标记和样式建议。 :)