链接和键盘焦点答案

【问题标题】：Links and keyboard focus链接和键盘焦点
【发布时间】：2011-08-19 04:46:17
【问题描述】：

这个问题是关于各种链接的键盘焦点。

div 内的链接 - 如下所示的简单链接可以通过键盘 tabindex 访问，但 div 和链接之间存在间隙，因此鼠标可以悬停在 div 上而不会触发链接的:hover 事件。

<div class="greenButton">
  <%= link_to "Back", :back %>
</div>

Div inside link - 下面的代码将:hover 事件放在一起（通常样式链接的行为与我预期的一样），但键盘无法通过 tabindex 访问它。 p>

<%= link_to :back do %>
  <div class="greenButton">Back</div>
<% end %>

如何使用 tabindex 更好地格式化底部情况？

注意：手动tabindex 声明不是一个好的选择，因为这是用于多个页面的代码，其中有不同数量的元素。有没有 Rails 的方式来做到这一点？

【问题讨论】：

您尝试了哪些浏览器？你在所有浏览器中都有同样的问题吗？
@mischa - 我在 Chrome 中遇到了这个问题。我还没有在其他地方测试过。
谢谢。你接受了我的回答。这是否意味着你的问题解决了？如果您在不使用 div 的情况下仍需要帮助设置链接样式，请向我们展示您的 CSS。
@mischa - 是的，谢谢！正如您和其他一些人提到的那样，我发现将这两个元素与类合并为一个 link_to 是可行的方法。您粘贴的代码也让我想起了将<div> 放在<a> 内的无效。

标签： html ruby-on-rails css ruby-on-rails-3

【解决方案1】：

通常，块级元素可能包含内联元素和其他块级元素。通常，内联元素可能只包含数据和其他内联元素。这种结构上的区别固有的是块元素创建比内联“更大”的结构的想法元素。

Source

换句话说：你不应该将像div 这样的块元素放在像a 这样的内联元素中。我建议丢失 div 并设置 a 元素的样式：

<%= link_to "Back", :back, :class => 'greenButton' %>

如果这不可行，您可以尝试将 div 替换为 span 并查看 tabindex 是否被拾取。

【讨论】：

【解决方案2】：

丢失<div>，它在那里没有任何用处。（大多数单子元素没有）

在你的链接上使用一个类

<%= link_to "Back", :back, :class => 'greenButton' %>

在你的 CSS 中让它成为一个块元素

a.greenButton {
  display: block;
  background-color: #9F6;
  …
}

【讨论】：

【解决方案3】：

根据W3C：

可能获得焦点的元素应该由用户代理导航根据以下规则：

那些支持 tabindex 属性并分配一个首先导航它的正值。导航从具有最低 tabindex 值的元素到具有最高值的元素价值。值不必是连续的，也不必以任何开头特定的价值。具有相同 tabindex 值的元素应该按照它们在字符流中出现的顺序进行导航。

那些不支持 tabindex 属性的元素或支持它并为其分配一个值“0”接下来导航。这些元素按照它们在角色中出现的顺序进行导航流。

被禁用的元素不参与选项卡订购。

那么也许禁用tabindex 分配并让浏览器使用第二种方法？

【讨论】：

【解决方案4】：

<%= link_to "Back", :back, :class => 'greenButton', :style => 'display: block;' %>

【讨论】：

有类声明时的内联样式？不是一个好习惯。