Safari中链接锚点无法正常工作

Question

我的HTML锚点如下所示。

<a name="template-8"/>
<h4 class="template" id="template-8">A title</h4>

据我所知，浏览器应该跳转到具有匹配名称或ID属性的元素。

当我在url中输入http://my.site.com/templates#template-8时，Safari如预期般跳转到页面底部。

然而，以下链接时锚点无效。Chrome、Opera、IE7和Firefox都能正常工作。

<a href="http://my.site.com/templates#template-8">A link</a>

Safari的版本是5.0，这可能是Safari的一个bug吗？

- Benbob

---

为什么你会把锚点元素写成 <a name="target-id" /> 而不是 <a href="#target-id">Target ID</a>？ - 2540625

Answer 1

问题在于我所链接的页面中有一个重定向头。

Opera、IE、Chrome和Firefox会将锚点带到新页面上。然而，Safari在重定向时会丢失锚点。

如果您在Safari中遇到了锚点问题，请禁用任何重定向。

- Benbob

---

非常感谢您的帮助。我在WordPress中遇到了这个问题。我不确定为什么会发生重定向。也许我曾经重命名过页面，但没有更新页面内的链接。 - cdonner

Answer 2

对我来说，我只需要改变。

http://domain.com/page#myanchor 

到

http://domain.com/page/#myanchor

- Jase Whatson

---

谢谢这个。简单的修复，同样适用于Firefox、Opera和Chrome。 - Ninetou

真的吗？这在Safari中对你有效吗？我没有看到相同的行为。 - Ryan McGeary

这是Keyo答案的实现方式 - 它通过删除由省略尾斜杠引起的重定向来工作（至少在WordPress中是如此）。 - Steve

Answer 3

我也遇到了同样的问题，并在搜索时找到了您的帖子 - 显然，自从2010年以来，您已经解决了这个问题，但我想发布我发现的内容，以防其他人发现。 :)

我正在使用htaccess将我的url从mydomaincom/index.php重定向到mydomaincom/，发现我的导航在Safari中无法正常工作，因为我的href地址是index.php#value，而Safari v5不会携带锚点链接。

与其关闭重定向，我只需将网址更改为指向mydomaincom/#value。这不仅对所有浏览器都有效，而且还使我的页面更快（尚不确定如何，现在将进行搜索：））

- frostedpops

Answer 4

我看到了两个次要问题，虽然它们不是原因（因为你已经找到了问题），但可能没有帮助：

• 自闭合的<a>标签。您不能自闭合应该有结束标记的标签，应该是：<a name="template-8"></a>。
• name和id属性共享相同的“命名空间”，因此您不能为name和id属性设置相同的值。过去10年中的所有浏览器都支持基于ID的锚点，因此可以删除无用的链接标记。

- DisgruntledGoat

Answer 5

之前提出的解决方案都没有起作用，对我来说，使用以下方式使用JavaScript创建重定向是有效的。

<!-- <a href="#first-block"> -->
<a href="javascript:redirection('first-block')">

function redirection(destination){
    window.location.href = "example.com/page.html#" + destination;
}

我把它留在这里，以防将来有人需要。

- DavidMB

Answer 6

为了在Safari中修复锚标签，我采用以下方法：

 <a href="#" class="btn">A tag</a>

而在我的 CSS 文件中：

.btn{
  display:block;
  width:100%;
  height:100%;
}

重要的是，由于某些原因，有时Safari需要将您的链接视为块，并且如果您创建一个包含一些链接的列表，则可能会很有用。例如：

<ul>
    <li><a href="#" class="btn">A tag</a></li>
    <li><a href="#" class="btn">A tag</a></li>
</ul>

适用于Safari 6及以上版本

- LukyVj