iPhone（Safari）定位標記無法按預期工作

我遇到了需要爲我的網站提供服務的特定瀏覽器/設備的問題。iPhone（Safari）定位標記無法按預期工作

本質上，我有錨點標籤，點擊時顯示一個隱藏的元素。這適用於iOS以外的所有應用程序（Firefox/Chrome/IE，Android FF/Chrome /瀏覽器）。點擊「查看簡歷」鏈接時，文本應該過渡並顯示。當在iOS上這樣做時，一個灰色框懸停在元素上（所以我假設它知道這裏有東西），但它不顯示隱藏的元素。

在做了一些研究後，我可以看到iOS處理「onclick」的方式或類似的問題。我試圖實現一些不同的東西（主要是基於Java的），儘管他們沒有工作。他們可能並不是我需要做的事情，因爲這個實現純粹是基於HTML/CSS的，但我已經嘗試了我遇到的所有事情。大多數涉及的修復通常不涉及隱藏的元素，並且更經常是簡單的「滾動到點」實現。這可能是同樣的事情。

據我所知，iOS中有一些錯誤或不喜歡錨定標記，從我已閱讀的文章/現有幫助頁面。它可能不適用，但根據一些用戶，iOS不提供「onclick」或「click」，而是使用某種形式的「touch」。

有沒有解決這個問題的方法？不管它是否有點麻煩，只要它按照預期爲iOS用戶提供服務。如果有辦法傾聽「點擊」，並將其視爲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; 
}

來源

2016-11-12 Randorile

可否請您縮短的問題，如果可能的話？ –

當然，雖然我認爲它可能已經被回答了。基本上，在iOS設備上，鏈接「＃」（應該錨定到隱藏元素）不起作用。該元素保持隱藏狀態，並且該鏈接的行爲好像不可點擊。只在iOS上。在其他設備/瀏覽器上正常工作。 – Randorile

請先檢查答案。讓你的問題縮短（同時保留所有相關信息）只會幫助你獲得更多（正面）的關注，就如你所知。 –

有一個與iOS上的Safari瀏覽器CSS :focus問題。

從this question的答案似乎工作。您需要添加tabindex="1"你的鏈接：

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

https://jsfiddle.net/1kqxopzs/

來源

2016-11-12 22:58:08 Alvaro

真棒，誰知道那很簡單。出於興趣，我可以問爲什麼這有用嗎？如果不是，我很樂意自己研究它。 – Randorile

對不起@Randorile，我不知道爲什麼。 – Alvaro

這很酷，我正在研究它。就這樣我學到了一些東西！感謝您的幫助。 – Randorile

iPhone（Safari）定位標記無法按預期工作

回答

相關問題