与其他浏览器相比，Chrome中的元素位置不同

Question

我有一张图片/链接，我试图绝对定位以下内容：

HTML：

<div id="content">
    <a href="/calendar"><img id="calendar" src="/bundles/majorproductionsadisite/images/calendar.jpg" alt="calendar" /></a>

    <div class="blogEntry">
        <h2>Blog title</h2>

        <div>Blog text</div>
    </div>
</div>

CSS：

#calendar {
    position: absolute;
    top: 210px;
    left: 420px;
    z-index: 9000;
}

在Chrome中，这会将日历图像刷新到博客的左侧：

相比之下，在Firefox和IE中，日历位于左侧更远的位置：

有关如何让Chrome与其他两个一致的建议，反之亦然？

Answer 1

您需要在页面上找到绝对定位元素的公共参考点。否则，元素相对于浏览器窗口定位，因此位置可以根据浏览器大小等而改变。尝试相对地定位内容div。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

您是否尝试使用CSS重置来清除所有边距和填充？重置旨在尽可能地防止跨浏览器的差异。

Why Use CSS Resets