<a href="#...">链接无效

Question

我正在尝试使用该<a href="#...">符号创建一组指向页面中特定部分的链接，但是它似乎不起作用。单击该链接似乎无济于事，并且right-click -> open in a new tab更改了网址，但不会移至页面的其他部分。我正在使用Firefox 28.0。我的链接如下：

<div>
    <p>Contents</p>
    <ul>
        <li><a href="#map">Map</a></li>
        <li><a href="#timing">Timing</a></li>
        <li><a href="#timingdetails">Timing Details</a></li>
    </ul>
</div>

他们应该链接到：

<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>

指向外部网页的链接可以正常工作。相反，将id="..."功能部件放置在<a>标签中并不能解决问题。我的网页网址的格式为http://127.0.0.1/foo/bar/baz/。这在Python Django项目中。

知道为什么这行不通吗？

Answer 1

哇，谢谢你指出这一点。显然，Mozilla Firefox 不会将该id属性与 HTML 文档中其他元素的位置相关联，而是<a>使用该name属性，而 Google Chrome 则恰恰相反。最跨浏览器证明的解决方案是：

1.给你的锚点divsaname和anid​​以确保最大。浏览器兼容性，例如：

<a href="#map">Go to Map</a> <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->

演示： http: //jsbin.com/feqeh/3/edit

2.仅使用<a>具有该属性的标签name作为锚点。

这将允许页面链接在所有浏览器中工作。

Answer 2

Every href needs a corresponding anchor, whose name or id attribute must match the href (without the # sign). E.g.,

<a href="#map">Map</a>

<a name="map">[content]</a>

An enclosing div is not necessary, if not used for other purposes.