Web固定页面标题和页内锚点出错位置

Question

我在网页固定页面标题和页内锚点方面遇到了麻烦。首先我看到这篇文章： "HTML position:fixed page header and in-page anchors" ，然后我输入以下代码：

HTML：

<a href="category.html#phone">PHONE</a>
<div class="subject2">PHONE</div>
<a name="phone" class="anchor"></a>

CSS：

.anchor{
    position:relative;
    top:-166px;
}

SEE ON jsfiddle

这适用于办公室计算机上的Chrome和Firefox，但是当我在自己的计算机上看到时会发生奇怪的事情：锚点显示顶部：0而不是顶部：-166，就像IE一样！
当它在同一个浏览器中显示不同时出了什么问题？我错过了什么？

谢谢！ ：）