html - 为什么 IE 在浏览网页时忽略 'tab position'，除非使用 'tabindex'？

Question

我正在使用快捷链接来加快浏览网页的速度，这在 Chrome 和 Firefox 中运行良好。

这是 Fiddle demonstrating my issue .

当使用跳过链接更改“选项卡位置”时，然后按 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然后将跳转到跳过链接的目标 之后 的下一个可聚焦元素 - try this demo .

除非您使用的是 IE。 IE 似乎只尊重“Tab 位置”的变化，前提是它们涉及关注交互式 元素或带有 tabindex 的元素。属性定义。这意味着 anchor 标记被用作“片段”或位置 anchor ，也不会导致 tabindex 被更新。

在上面的示例中，选择“跳过”链接然后点击 TAB简单地跳回到页面上的第一个链接。选择“跳到 anchor ”然后选择“Tab”也会跳回顶部。这个怪癖似乎会影响 IE 8-11。

好的，那么为什么不直接将跳过链接指向交互式元素而不是包装器呢？我试过了，正好解决了IE中的bug，并在Firefox中引入了它。如果我优先考虑 IE 而不是 FF，我会被诅咒。

我是不是漏掉了一些非常明显的东西？

---

更新

我已经解决了这个问题，解决方案是只创建指向 <a> 的片段/跳过链接带有负数 tabindex 的标签赋值:

<a href="#destination">Skip to somewhere down the page</a>

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

适用于 Chrome、FF 和 IE。

Answer 1

正如我在评论中提到的，div不是制表位(它可以有焦点，但它不是制表位)。对于 Internet Explorer，以下元素是可聚焦的，但不代表制表位:applet , div , frameset , span , table和 td (来源MSDN)。在现代浏览器中，但在旧浏览器中，您可以使用任何具有已定义 id 的元素。作为 anchor - 也是一个制表位 - 但不适用于 Internet Explorer 11。代表 Internet Explorer 的制表位的唯一元素是:a , body , button , frame , iframe , img , input , isIndex (已弃用的元素)，object , select和 textArea .因此，跳转到制表位的最佳解决方案是使用这些元素之一或更明显的元素，即 anchor 链接。 anchor 链接是 a带有 id 的元素没有 href : <a id="tabstop"></a> .问题或错误是，对于 Internet Explorer 11，没有 href 的 anchor 链接(它只需要定义，它可以是空的)不会像制表符一样工作。所以最好的解决方案是使用不带空(或 # )href 的 anchor 链接.

在下面的片段中，“跳到 DIV”链接将跳转到第一个 div , 所以在 Internet Explorer 11 上它不会代表制表位；使用选项卡将循环浏览页面中的所有链接。 “skip to ANCHOR”链接将跳转到一个 anchor 链接，在修复错误后， anchor 链接将代表一个制表位，因此按下 tab 将使光标跳转到下一个可制表元素:输入。

<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>

希望对您有所帮助。