Html 链接上的 Safari 锚点不起作用

Safari anchors on links not working

提问by Keyo

My html anchor is as follows.

我的 html 锚点如下。

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

As far as I know the browser should skip to the element with a matching name or id attribute.

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

When I type in the url http://my.site.com/templates#template-8safari jumps down the page as expected.

当我输入 url http://my.site.com/templates#template-8safari 按预期跳下页面时。

However when linking as below the anchor does nothing. Chrome, Opera, IE7 and Firefox all work.

但是，当如下链接时，锚点什么都不做。Chrome、Opera、IE7 和 Firefox 都可以工作。

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

Safari is version 5.0, could this be a safari bug?

Safari 是 5.0 版，这可能是 safari 的错误吗？

回答by Keyo

The problem was I had a redirect header in the page I was linking to.

问题是我在链接到的页面中有一个重定向标题。

Opera, IE, Chrome, Firefox will carry over the anchor to the new page. However safari loses the anchor on the redirect.

Opera、IE、Chrome、Firefox 将锚点带入新页面。然而，safari 失去了重定向的锚点。

If you are having trouble with safari anchors disable any redirects.

如果您在使用 safari 锚点时遇到问题，请禁用任何重定向。

回答by Jase Whatson

For me, I simply had to change

对我来说，我只需要改变

http://domain.com/page#myanchor 

to

到

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

回答by frostedpops

I just ran into the same issue and found your post while searching - obviously you've fixed this since it was back in 2010 and but figured I would post what I found in case someone else finds this. :)

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

I'm using htaccess to redirect my url from mydomaincom/index.php to mydomaincom/ and found that my nav didn't work in Safari since my href addresses where index.php#value and Safari v5 wouldn't carry over the anchor links.

我正在使用 htaccess 将我的 url 从 mydomaincom/index.php 重定向到 mydomaincom/ 并发现我的导航在 Safari 中不起作用，因为我的 href 地址中 index.php#value 和 Safari v5 不会携带锚链接.

Rather than turn off my redirect I just changed the urls to point to mydomaincom/#value. Not only did this work great for all browsers but it also made my page quicker (not yet sure how but will search this now :))

我没有关闭重定向，而是将 url 更改为指向 mydomaincom/#value。这不仅适用于所有浏览器，而且还使我的页面更快（还不确定如何但现在会搜索它:)）

回答by DisgruntledGoat

There are two side issues I see, which aren't the cause (since you found the problem already) but probably don't help:

我看到有两个附带问题，这不是原因（因为您已经找到了问题），但可能无济于事：

• Self-closing <a>tag. You can't self-close tags that are supposed to have end tags, it should be: <a name="template-8"></a>.
• The nameand idattributes share the same "namespace", so you cannot have the same value for a nameand idattribute. All browsers from the past 10 years support anchors on IDs, so scrap that useless link tag.

• 自闭合<a>标签。您不能自行关闭应该具有结束标签的标签，它应该是：<a name="template-8"></a>。
• 在name和id属性共享相同的“命名空间”，所以你不能有一个相同的值name和id属性。过去 10 年的所有浏览器都支持 ID 上的锚点，因此废弃无用的链接标签。

回答by LukyVj

To fix an anchor tag in Safari. I proceed this way :

修复 Safari 中的锚标记。我是这样进行的：

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

And on my css file :

在我的 css 文件中：

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

The important thing is for some reason, sometimes Safari needs to see your link as a block, and it can be useful if you create a list, with some links inside. Example :

重要的是出于某种原因，有时 Safari 需要将您的链接视为一个块，如果您创建一个列表，其中包含一些链接，这会很有用。例子 ：

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

Works for Safari 6+

适用于 Safari 6+

回答by DavidMB

It has not worked with the previously proposed solutions, it has worked for me to create a redirection using javascript in the following way.

它不适用于先前提出的解决方案，它对我有用，可以通过以下方式使用 javascript 创建重定向。

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

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

I leave it here in case someone serves you in the future.

我把它留在这里以防将来有人为你服务。