html - 内部链接的绝对定位问题

Question

http://dev.epicwebdesign.ca/karen/2-4/a/#antartica

绝对定位大陆，由于某种原因，链接没有到达正确的位置。这是绝对定位的不足，还是我在做一些愚蠢的事情？

锚点在标题周围，因为它们应该是。

刚刚意识到它会出现在图像的顶部，而不是下面的标题。为什么？

Answer 1

定义片段的<a name="fragment_name" />方法已被弃用，取而代之的是使用ids. 因此，当您访问http://dev.epicwebdesign.ca/karen/2-4/a/#antartica时，浏览器会认为您想访问<div id="antarctica"/>位于页面顶部的 ，而不是位于页面顶部的<a name="antarctica" />，页面底部。

Answer 2

事实证明，至少在 chrome 中，它认为 ID 是内部链接，而不仅仅是名称。图片的 ID 与标题的名称冲突。一旦ID以“img”为后缀，它就可以工作

Answer 3

添加到 cimmanon 的答案（如果您引用的页面发生更改）。

注意：请粘贴您的代码以供将来参考。

---

更改页面顶部的锚点：

<div id="continents">
    <a href="#northamerica" id="northamerica"><img src="northamerica.png"></a>
    <a href="#southamerica" id="southamerica"><img src="southamerica.png"></a>
    <a href="#asia" id="asia"><img src="asia.png"></a>
    <a href="#europe" id="europe"><img src="europe.png"></a>
    <a href="#oceania" id="oceania"><img src="oceania.png"></a>
    <a href="#antartica" id="antartica"><img src="antartica.png"></a>
    <a href="#africa" id="africa"><img src="africa.png"></a>
</div>

到：

<div id="continents">
    <a href="#northamericaSection" id="northamerica"><img src="northamerica.png"></a>
    <a href="#southamericaSection" id="southamerica"><img src="southamerica.png"></a>
    <a href="#asiaSection" id="asia"><img src="asia.png"></a>
    <a href="#europeSection" id="europe"><img src="europe.png"></a>
    <a href="#oceaniaSection" id="oceania"><img src="oceania.png"></a>
    <a href="#antarticaSection" id="antartica"><img src="antartica.png"></a>
    <a href="#africaSection" id="africa"><img src="africa.png"></a>
</div>

请注意，我已更改href所有链接上的。

并将您的标题从以下更改为：

<a id="antartica">
    <h1>Antartica</h1>
</a>

到：

<h1 id="antarticaSection">Antartica</h1>

没有锚（除非您打算将其链接到其他东西）。