为什么IE在通过网页时忽略“Tab位置”，除非使用“TabIndex”？

Question

我使用快捷链接来加速浏览网页，这在Chrome和Firefox中都有效。 这里是 Fiddle演示我的问题。 当使用跳过链接来更改“tab位置”，然后按TAB键时，大多数浏览器会从那一点开始顺序跳转到可聚焦的交互式或具有tabindex属性的元素：

<div class="skiplinks">
    <a href="#nav">Skip to Navigation</a>
    <a href="#search">Skip to Search</a>
    <a href="#anchor">Skip to anchor</a>
</div>

<div id="wrapper">
    <p>Some boring content containing <a href="#">a selectable link</a>.</p>
    <ul id="nav">
        <li><a href="#">link 1</li>
        <li><a href="#">link 2</li>
        <li><a id="anchor">anchor with no href</li>
    </ul>
    <form id="search">
        <input type="search" id="search-field" />
    </form>
</div>

在这个示例中，当链接被点击时，“选项卡位置”会移动到文档中的该位置。然后按下“TAB”键将跳转到尝试此演示之后的下一个可聚焦元素。

除非你使用IE。 IE似乎只有在涉及到聚焦在交互式元素或定义了tabindex属性的元素时才会尊重“选项卡位置”的更改。这意味着作为“片段”或位置锚点使用的锚标签也不会导致tabindex更新。

在上面的示例中，选择Skip链接然后按TAB键只会跳回页面上的第一个链接。选择“跳转到锚点”然后“Tab”也会跳回顶部。这种怪癖似乎影响IE 8-11。

那么为什么不直接将skiplinks指向交互式元素而不是包装器呢？我尝试过，碰巧解决了IE中的错误，并在Firefox中引入了它。如果我优先考虑IE而不是FF，那就太糟糕了。

我是不是错过了什么非常明显的东西？

---

更新

我已经解决了这个问题，解决方法是只创建指向具有负tabindex值的<a>标签的片段/跳转链接：

<a href="#destination">跳到页面下方某处</a>

<a id="destination" tabindex="-1"></a>

在Chrome，FF和IE中有效。

- Timmah

---

默认情况下，Internet Explorer 中的 div 元素不是选项卡停靠点，因此行为“符合预期”。您需要解决方案还是解释？ :) - muecas

@meucas 我已经更新了我的示例和问题，提到 div 并不像你说的那样有效，但是锚链接呢？如果有更多细节，请告诉我。我已经解决了这个问题，但仍希望所有人都能找到解决方案 :) - Timmah

我认为你不会给赏金 :-) - muecas

抱歉，我有一段时间没有登录了。现在归你了，非常感谢你的详细回答 :) - Timmah

Answer 1

如我在评论中所提到的，div 不是一个选项卡停靠点（它可以获得焦点，但不是选项卡停靠点）。对于 Internet Explorer 浏览器，以下元素可以获得焦点，但不表示选项卡停靠点：applet、div、frameset、span、table 和 td（来源：MSDN）。在现代浏览器中，可以使用具有定义的 id 的任何元素作为锚点，也可以将其用作选项卡停靠点，但对于 Internet Explorer 11，则不行。对于 Internet Explorer，表示选项卡停靠点的仅有以下几种元素：a、body、button、frame、iframe、img、input、isIndex（已弃用元素）、object、select 和 textArea。因此，跳转到选项卡停靠点的最佳解决方案是使用这些元素之一或更明显的元素：锚链接。锚链接是一个带有 id 但没有 href 属性的 a 元素：<a id="tabstop"></a>。问题或错误在于，对于 Internet Explorer 11，没有 href 的锚链接（它只需要被定义，可以为空）不起作用，就像选项卡停靠点一样。因此，最好的解决方案是使用一个没有空的（或 #）href 的锚链接。

在以下代码片段中，“跳转到 DIV”链接将跳转到第一个 div，因此在 Internet Explorer 11 中它将不表示为选项卡停靠点；使用选项卡键会循环遍历页面中的所有链接。 “跳转到 ANCHOR” 链接将跳转到一个锚链接，在修复了该 bug 后，该锚链接将表示为选项卡停靠点，因此按下选项卡键将使光标跳转到下一个可选项卡元素：输入框。

<div class="skiplinks">
  <a href="#wrapper">Skip to DIV</a>
  <a href="#anchor">Skip to ANCHOR</a>
 </div>
 
 <div id="wrapper">
  <p>Some boring content containing a selectable <a href="#">link</a>.</p>
  <ul id="nav">
   <li><a href="#">link 1</a></li>
   <li><a href="#">link 2</a></li>
   <li><a id="anchor" href="">anchor with href</a></li>
  </ul>
  <form id="search">
   <input type="search" id="search-field" />
  </form>
 </div>

希望这能帮到你。

- muecas