У меня есть небольшая проблема с табуляцией в 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, нажмите ввод, чтобы перейти к соответствующей привязке, затем снова нажмите вкладку, он всегда по умолчанию возвращается к startTimeIcon вместо перехода к следующему значку справки.Даже если вы выбрали lengthIcon (последний в списке), повторное нажатие на вкладку вернет вас обратно к startTimeIcon.
Я понятия не имею, как к этому подойти, хотя я вполне уверен, что это ошибка сТо, как IE обрабатывает порядок табуляции, но для клиента это серьезная проблема, поскольку сайт должен быть на 100% удобен для чтения с экрана и навигации по ним.
Любая помощь будет принята с благодарностью.
Спасибо,
грамматика