iPhone (Safari) 锚标签无法正常工作

Question

我在处理需要为我的网站提供服务的特定 browser/device 时遇到了问题。

基本上，我有锚标记，单击时会显示隐藏的元素。这适用于除 iOS 之外的所有内容（Firefox/Chrome/IE 在 PC 上，Android FF/Chrome/Browser）。单击 "View Bio" link 时，文本应过渡并显示。在 iOS 上执行此操作时，一个灰色框会悬停在该元素上（因此我假设它知道那里有东西），但它不会显示隐藏的元素。

经过一些研究后，我发现 iOS 处理 "onclick" 的方式可能存在问题，或者类似的问题。我已经尝试实现一些不同的东西（主要是基于 java），尽管它们没有用。它们实际上可能不是我需要做的，因为这个实现纯粹是基于 HTML/CSS，但我已经尝试了我遇到的一切。所涉及的大多数修复通常不涉及隐藏元素，并且通常是简单的 "scroll to point" 实现。很可能是同一件事。

据我所知，我阅读的 articles/existing 帮助页面中存在某种错误或不喜欢带有 iOS 的锚标记。它可能不适用，但根据某些用户的说法，iOS 不提供 "onclick" 或 "click"，而是使用某种形式的 "touch"。

有解决办法吗？只要它按预期为 iOS 用户提供服务，即使有点乱也没关系。如果有一种方法可以侦听 "click" 并将其视为 iOS 的 "touched"，那可能是最简单的解决方案。我不是专家，所以我可能离谱。

我的代码：

<div class="dimg">
<img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive" style="border:2px solid #535353;">
</div> 
<a href="#" class="showme" onclick="return false">View Bio</a>
<div id="desk" class="trans">
  <p>This is the text to be displayed when the anchor is clicked</p>

CSS:

.showme {
 text-decoration:none;
 color:#535353;
 letter-spacing:1px;
 }

.showme:focus + #desk {
 opacity:1;
 visibility:visible;
 position:relative;
 }

#desk {
visibility:hidden;
opacity:0;
position:absolute;
border-radius:10px;
margin-top:10px;
text-align:left;
}

Answer 1

CSS :focus 在 iOS Safari 上存在问题。

this question 的答案似乎有效。您需要将 tabindex="1" 添加到您的 link:

<a href="#" class="showme" onclick="return false" tabindex="1">View Bio</a>

https://jsfiddle.net/1kqxopzs/

iPhone (Safari) 锚标签无法正常工作

iPhone (Safari) anchor tags don't work as intended

html

css

anchor

ios