Question

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

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

锚点应该在标题周围。

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

Answer 1

已弃用<a name="fragment_name" />定义片段的方法，转而使用id s。因此，当您转到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>

没有锚点（除非您计划将其链接到其他东西）。

内部链接的绝对定位问题

3 个答案: