Question

我从IE 6到8版本中遇到了一些标签问题（仍未在9版本中进行测试，但我希望一个修复程序能解决所有问题）...

我有一个页面，上面有一个小工具，有一个帮助图标，点击后可以在页面下方导航到词汇表，以描述工具的每个部分。词汇表区域中的每个段落都有一个“返回顶部”按钮，该按钮链接到最初选择的特定帮助图标。

以下是一些代码。

首先，包含该工具的表格，我已将其删除，因为它不是错误的一部分。此部分只是该工具的标题：

  <table class="timeCardTable">
<tbody>
  <tr>
    <th>
        <span>Start</span>
        <a href="#startTime" name="startTimeIcon" id="startTimeIcon" class="helpIcon">
            <img src="images/helpIcon.png" width="16" height="16" title="Start tooltip." alt="Start tooltip." />
        </a>
    </th>

    <th>
        <span>End</span>
        <a href="#endTime" name="endTimeIcon" id="endTimeIcon" class="helpIcon">
            <img src="images/helpIcon.png" width="16" height="16" title="End tooltip." alt="End tooltip." />
        </a>
    </th>

    <th>
        <span>Length</span>
        <a href="#length" name="lengthIcon" id="lengthIcon" class="helpIcon">
            <img src="images/helpIcon.png" width="16" height="16" title="Length tooltip." alt="Length tooltip." />
        </a>
    </th>

    <th style="display: none;">
        <span>Eating Period</span>
        <a href="#eatingPeriod" name="eatingPeriodIcon" id="eatingPeriodIcon" class="helpIcon">
            <img src="images/helpIcon.png" width="16" height="16" title="Eating period tooltip." alt="Eating period tooltip." />
        </a>
    </th>
  </tr>
</tbody>

现在工具下面是这些a.helpIcon标签都指向的相应锚点：

  <div class="glossaryContent">

<h2 style="color: rgb(0, 0, 255); ">Glossary</h2>

<a name="startTime"></a>
<h3 style="color: rgb(0, 0, 255); ">Start Time </h3>
<p style="color: rgb(0, 0, 255); ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed quam eu est mattis faucibus. Pellentesque eu sapien purus. Donec tincidunt, nibh id sagittis commodo, mauris ipsum pharetra tellus, ut mattis felis lorem vel mi. Quisque massa lacus, ultrices eu consectetur suscipit, pellentesque et nibh. Phasellus imperdiet consequat neque sit amet ullamcorper. Duis et libero ac massa feugiat venenatis. Integer pulvinar molestie metus sed molestie. Vivamus scelerisque, neque at accumsan sollicitudin, diam tellus venenatis lorem, ac tempor massa velit non massa. 
    <br />
    <a href="#startTimeIcon">top</a>
</p>

<a name="endTime"></a>
<h3 style="color: rgb(0, 0, 255); ">End Time </h3>
<p style="color: rgb(0, 0, 255); ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed quam eu est mattis faucibus. Pellentesque eu sapien purus. Donec tincidunt, nibh id sagittis commodo, mauris ipsum pharetra tellus, ut mattis felis lorem vel mi. Quisque massa lacus, ultrices eu consectetur suscipit, pellentesque et nibh. Phasellus imperdiet consequat neque sit amet ullamcorper. Duis et libero ac massa feugiat venenatis. Integer pulvinar molestie metus sed molestie. Vivamus scelerisque, neque at accumsan sollicitudin, diam tellus venenatis lorem, ac tempor massa velit non massa. 
    <br />
    <a href="#endTimeIcon">top</a>
</p>

<a name="length"></a>
<h3 style="color: rgb(0, 0, 255); ">Length </h3>
<p style="color: rgb(0, 0, 255); ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed quam eu est mattis faucibus. Pellentesque eu sapien purus. Donec tincidunt, nibh id sagittis commodo, mauris ipsum pharetra tellus, ut mattis felis lorem vel mi. Quisque massa lacus, ultrices eu consectetur suscipit, pellentesque et nibh. Phasellus imperdiet consequat neque sit amet ullamcorper. Duis et libero ac massa feugiat venenatis. Integer pulvinar molestie metus sed molestie. Vivamus scelerisque, neque at accumsan sollicitudin, diam tellus venenatis lorem, ac tempor massa velit non massa. 
    <br />
    <a href="#lengthIcon">top</a>
</p>

现在我似乎遇到的问题是，每个浏览器都会以不同的方式处理这些事情。在Chrome中，如果您选中第一个“帮助图标” - 锚标记，其中name =“startTimeIcon” - 并按Enter键，它会将您带到“开始时间”区域没问题。再次点击选项卡会返回上面的帮助图标，重点关注选项卡顺序中的NEXT图标，该图标将是名为“endTimeIcon”的锚标记。这完全客户希望它如何工作，因为这是他们的可访问性要求之一。

然而，在IE中，如果您选择顶部的任何锚点，startTimeIcon，endTimeIcon或lengthIcon，请按Enter键以转到相应的锚点，然后再次点击tab，它总是默认返回startTimeIcon，而不是转到下一个帮助图标。即使您选择了lengthIcon（列表中的最后一个），再次点击标签会直接返回startTimeIcon。

我不知道如何处理这个，虽然我很确定它是IE处理Tab键顺序的错误，但这对于客户来说是个大问题，因为该网站需要100％的屏幕阅读器友好并可通过标签浏览。

非常感谢任何帮助。

谢谢，

语法

Answer 1

经过几个小时的黑客攻击后，我最终得到了一些更好的东西。通过向每个helpIcon锚点添加与name属性相同的id并向目标锚点添加href“＃”，tabbing以客户认为可接受的方式自行更正。如果我点击其中一个帮助图标，该网站现在导航到相应的目的地，其中另一个标签导航到描述下面的相应“返回顶部”链接，然后将用户返回到上次选择的帮助图标，允许用户以正确的顺序选择下一个。这也恰好是它一直在Firefox中运行的方式。

干杯

在IE中的目标锚点之间来回切换

1 个答案: