Question

我在使用我需要为我的网站投放的特定浏览器/设备时遇到问题。

基本上，我有锚标签，当点击时会显示隐藏的元素。这适用于除iOS之外的所有内容（除了PC上的Firefox / Chrome / IE，Android FF / Chrome /浏览器）。点击＆＃34;查看生物＆＃34;链接，文本应该过渡并显示。在iOS上执行此操作时，灰色框会悬停在元素上（因此我假设它知道存在某些内容），但它不会显示隐藏元素。

经过一些研究后，我发现iOS处理的方式可能存在问题＆＃34; onclick＆＃34;或者那种效果。我试图实现一些不同的东西（主要是基于java的）虽然它们没有用。它们可能实际上并不是我需要做的，因为这个实现纯粹基于HTML / CSS，但我已经尝试了所有我遇到过的东西。所涉及的大多数修复程序通常不涉及隐藏的元素，并且通常更简单＆＃34;滚动到点＆＃34;实现。它可能是同样的事情。

据我所知，从我阅读过的文章/现有的帮助页面中，对iOS的锚标签存在某种错误或不喜欢。它可能不适用，但根据一些用户iOS不提供服务＆＃34; onclick＆＃34;或者＆＃34;点击＆＃34;，而是使用某种形式的＆＃34;触摸＆＃34;。

这有解决方法吗？只要它按照预期为iOS用户服务，它是否有点麻烦并不重要。如果有方法可以聆听＆＃34;点击＆＃34;并将其视为“触动”＃34;对于iOS来说，这可能是最简单的解决方案。我不是专家，所以我可以做得很好。

我的代码：

<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

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

this question的答案似乎有效。您需要在链接中添加tabindex="1"：

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

https://jsfiddle.net/1kqxopzs/

iPhone（Safari）锚标记无法正常工作

1 个答案: