的位置我有一個URL與工作，因爲它應該錨：更改默認啓動#anchor
site.com/item/id#comment-233
打開時，錨將被定位在頁面完全頂部。
如何更改起點？假設我希望它從頂部向下變爲50px。
我需要這個的原因是因爲我在頁面頂部有固定圖層，所以評論出現重疊在固定標題div後面。
爲防萬一，由於跨瀏覽器的合規性，我更喜歡一個解決方案，不涉及將註釋的容器更改爲固定和定位頂部減去標頭的高度。
假設你<a>標籤沒有內容，添加一個類將其與position:relative; top:-50px;
標記根據您的文檔，你還我必須把它包在絕對<div>
這應該是交叉瀏覽器兼容，如果執行正確
編輯
這是測試我在本地完成的，它在FF 3.6
<html>
<body style='margin:0; padding:0;'>
<div style='position:fixed; height:50px; background-color:#F00; width:100%'>
Fixed header
</div>
<div style='padding-top:50px'>
<div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>
<a name='linkhere' style='position:relative; top:-75px;'></a>
Link here</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
</div>
</body>
</html>
工作正常，這工作一種享受對我來說，基於上述建議：
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-30px; /* or whatever value you need */
}
此代碼適用於Firefox，Chrome，IE以及其他人：
<a id="comment-3" class="shifted_anchor"> </a>
<div>
... comment ...
</div>
如果是這種樣式表：
a.shifted_anchor {
position: relative;
top: -35px;
margin: 0;
padding: 0;
float: left;
}
的關鍵是float屬性：我們用它來避免因 額外的垂直空間，而這又是需要跨瀏覽器的兼容性。
所以我在這裏結合了一些想法，並提出了一個適用於我和所有瀏覽器的好的方法。空錨點似乎不適用於webkit瀏覽器，絕對不適用於Chrome。向錨點添加僞元素可修復此問題而不會破壞佈局。
a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
content:"";
float: left;
height: 0px;
}
只需將$offsetHeight替換爲您需要的任何東西。
添加「display：block;」制定了我：
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-50px;
display: block;
}
.anchor{
display: block;
height: 115px; <!--same height as header-->
margin-top: -115px; <!--same height as header-->
visibility: hidden;
}
<span class="anchor"></span>
<div>content...</div>
從http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/
我都嘗試，但似乎並沒有工作。 – Martin 2011-02-14 20:08:28
@Martin使用代碼示例編輯了我的答案 – Damp 2011-02-14 20:30:20
它適用於FF 3。6但它在Safari中既不工作也不是Chrome。 – Martin 2011-02-14 21:33:04