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问题：选项卡焦点错误

回答

相关问题