Html 锚标签在 iPhone Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22643032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anchor tag doesn't work in iPhone Safari
提问by Akhil Paul
I'm having an issue with a named anchor tag in iPhone Safari browser. It works well in desktop browsers including Safari, but not working in mobile Safari. Weird!
我在 iPhone Safari 浏览器中遇到了命名锚标记的问题。它适用于包括 Safari 在内的桌面浏览器，但不适用于移动 Safari。奇怪的！
For example my URL looks like:
例如我的网址看起来像：
http://www.example.com/my-example-article-url-is-like.php#articlebottom
the above URL is from a newsletter and it should go to the bottom paragraph in article page which I gave id like this:
上面的 URL 来自时事通讯，它应该转到文章页面的底部段落，我给了这样的 id：
<p id="articlebottom">paragraph is here</p>
When I click the above URL from Newsletter it goes to the article page, but not the bottom para where I specify id. Although I can see that the #articlebottom part is missing from URL when it came into the targeted page in Safari.
当我从 Newsletter 单击上面的 URL 时，它会转到文章页面，但不会转到我指定 id 的底部段落。虽然我可以看到，当它进入 Safari 中的目标页面时，URL 中缺少 #articlebottom 部分。
Any thoughts would be appreciated!
任何想法将不胜感激！
回答by Kheema Pandey
Opera, IE, Chrome and Firefox will carry over the anchor to the new page. However, Safari loses the anchor on the redirect.
Opera、IE、Chrome 和 Firefox 会将锚点转移到新页面。但是，Safari 会丢失重定向的锚点。
So what if you add /just before the ID Tag?
那么如果你/在ID Tag?之前添加呢？
Old URL Path:
http://www.example.com/my-example-article-url-is-like.php#articlebottom
旧网址路径：
http://www.example.com/my-example-article-url-is-like.php#articlebottom
New URL Path:
http://www.example.com/my-example-article-url-is-like.php/#articlebottom
新网址路径：
http://www.example.com/my-example-article-url-is-like.php/#articlebottom
Another solution is that you'd have to delete both "www." from the domain and add a forward slash before the anchor tagin the URL/pathname before Safari would respond properly. Firefox doesn't seem to care, and I haven't gotten to testing on IE yet.
另一种解决方案是您必须删除两个“www”。anchor tag在 Safari 正确响应之前，从域中添加一个正斜杠在URL/路径名之前。Firefox 似乎并不关心，我还没有在 IE 上进行测试。
回答by Laura Keller
just doing my due diligence and answering for anyone who is having this problem with Index navigation links on a Squarespace page and Safari on iOS. My anchor links were not working when formatted as such:
只是尽职调查并回答任何在 Squarespace 页面上的索引导航链接和 iOS 上的 Safari 上遇到此问题的人。我的锚链接在格式化时不起作用：
http://sitename.com/page#anchor
Then I tried this to no avail:
然后我尝试了这个无济于事：
http://sitename.com/page/#anchor"
Rather than give up, light my computer on fire, and call it a day I tried:
与其放弃，不如点燃我的电脑，然后我尝试过：
http://www.sitename.com/page/#anchor
And it worked! So cheers if this helps anyone.
它奏效了！如果这对任何人有帮助，那么欢呼吧。
回答by Harald Ernst
Safari loses the anchor tag after redirecting. So avoid anything that leads to a (second) redirect.
Safari 在重定向后丢失锚标记。所以避免任何导致（第二个）重定向的事情。
- use the full URL (http://...)
- note if there is a redirect to www or not (www.domain...)
add a trailing / if there is no prefix like .html/.php (mypage/)
http://www.domain.tdl/mypage/#safari
- 使用完整的 URL ( http://...)
- 请注意是否有重定向到 www (www.domain ...)
添加尾随 / 如果没有像 .html/.php (mypage/) 这样的前缀
http://www.domain.tdl/mypage/#safari
Maybe it's useful to check for a redirect using tools like cURL
也许使用 cURL 之类的工具检查重定向很有用
curl -I http://www.domain.tdl/mypage/#safari
回答by Bill McCann III
I have been wrestling with this problem for a client of mine. I will not name names but I will share a solution I found which suddenly brought dead anchors links back to life and working on both the mobile and desktop versions of the site.
我一直在为我的一个客户解决这个问题。我不会说出名字，但我会分享一个我发现的解决方案，它突然让死锚链接恢复生机，并在网站的移动和桌面版本上工作。
I had attributed the malfunction to an overabundance of page / site scripts and css which I can not change because while this site belongs to a local business it is part of a global corporate network which has its own protocols and best practices. In other words, I can specify inline styles to distinguish page elements but at the end of the day the page must conform to corporate guidelines and rules.
我将故障归因于过多的页面/站点脚本和 css，我无法更改，因为虽然该站点属于本地企业，但它是拥有自己的协议和最佳实践的全球企业网络的一部分。换句话说，我可以指定内联样式来区分页面元素，但最终页面必须符合公司指南和规则。
Here's a snippet of my code that embodies what I learned:
这是我的代码片段，体现了我所学到的：
href="#anchorname" target="_top"
The key here is the target tag _top
这里的关键是目标标签_top
According to http://www.w3schools.com/tags/att_a_target.aspthe default target is _self and while your html generator may not write that specific bit of code into your pages which is to say that because it is the default IT DOES NOT HAVE TO BE SPECIFIED, my research has indicated that by specifying _top as the target the dead link problem was solved.
根据http://www.w3schools.com/tags/att_a_target.asp，默认目标是 _self，而您的 html 生成器可能不会将特定的代码写入您的页面，也就是说，因为它是默认的不必指定，我的研究表明，通过将 _top 指定为目标，死链接问题已解决。
I hope this solution works for you.
我希望这个解决方案对你有用。
