IE問題：選項卡焦點錯誤

我在頁面頂部有一個名爲「跳過導航」的鏈接，每次用戶按下Tab鍵時都會出現在屏幕上，並且如果他在按下回車鍵的同時「跳過導航」處於焦點，它將他帶到頁面的＃主要部分，以便他跳過頂部導航並直接進入主區域。這一切都適用於Chrome，Firefox，Safari。這個問題出現在IE中（我測試了ie9和ie11）。IE問題：選項卡焦點錯誤

方案在IE：

壓力機選項卡 - 「跳過導航」出現在頁面上 - 按下回車鍵 - 刷新，#main頁面添加到URL - 按選項卡 - 「跳過導航」出現在頁面上

有沒有人知道任何解決方案的IE強制跳過導航，並轉到頁面的主要部分？任何幫助將不勝感激。

#skip a { 
 
    position: absolute; 
 
    left: -10000px; 
 
    top: auto; 
 
    width: 1px; 
 
    height: 1px; 
 
    overflow: hidden; 
 
} 
 

 
#skip a:focus { 
 
    left: auto; 
 
    font-size: 20px; 
 
    position: static; 
 
    width: auto; 
 
    height: auto; 
 
} 
 

 
nav { 
 
    background: #847577; 
 
    color: white; 
 
    padding: 1em; 
 
    text-align: center; 
 
} 
 

 
nav a { 
 
    color: white; 
 
} 
 

 
#main { 
 
    background: #E5E6E4; 
 
    padding: 1em; 
 
} 
 

 
#main a { 
 
    color: black; 
 
}

<div id="skip"><a href="#main">Skip navigation</a></div> 
 
<nav> 
 
    <a href="/">Home</a> 
 
    <a href="/">About Us</a> 
 
</nav> 
 
<div id="main"> 
 
    Main Content On The Page <a href="/">Link</a> 
 
</div>

的jsfiddle：https://jsfiddle.net/13p0eo43/

來源

2017-10-12 Rachel Nicolas

我認爲你有兩個選擇，如果它不符合標準的工作方式爲你描述：

焦點#main使用JavaScript .focus（）方法之後的第一個可聚焦元素。您在這裏遇到的困難將決定哪個元素必須關注，因爲它可能並不總是如此簡單。
在單擊鏈接時使用JavaScript .focus（）方法在#main和focus #main上設置tabindex = -1。用戶下一次按下標籤時，下一個可調焦元素將獲得焦點，並且在按Shift +選項卡時（由於值爲-1），#main不能再被聚焦。

來源

2017-10-14 09:58:48 QuentinC

IE問題：選項卡焦點錯誤

回答

相關問題