Javascript 选项卡焦点显示不正确

My JSP显示一个按钮，如下所示：

<div id="verify" style="position:relative;height:50px;">
   <a id="key_verify" class="generic_link" href="#">
       <span class="verify_span">Verify</span>
   </a>
</div>

span.verify_span {
    background: url("/images/normal.png") repeat-x scroll 0 0 transparent;
    color: #000000;
    display: inline-block;
    float: left;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    line-height: 41px;
    margin-top: 20px;
    padding: 0 20px;
}

a.generic_link {
    text-decoration: none;
}

$("#key_verify").click(function () {
       ...// perform task
 }

JS如下所示：

<div id="verify" style="position:relative;height:50px;">
   <a id="key_verify" class="generic_link" href="#">
       <span class="verify_span">Verify</span>
   </a>
</div>

span.verify_span {
    background: url("/images/normal.png") repeat-x scroll 0 0 transparent;
    color: #000000;
    display: inline-block;
    float: left;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    line-height: 41px;
    margin-top: 20px;
    padding: 0 20px;
}

a.generic_link {
    text-decoration: none;
}

$("#key_verify").click(function () {
       ...// perform task
 }

当我点击键盘上的tab时，它指向其他地方&不完全指向确切的按钮，而只指向文本。如果你观察其他网站上的标签，通常它会在按钮的边框上显示虚线，但在我的例子中，它只在文本上显示虚线

如何使选项卡正确显示在整个按钮上

---

谢谢

浮动：CSS中的左侧是相对于的span浮动，并完成CSS中的所有剩余工作。它更干净。

将显示：块添加到span。验证您为什么不使用？这是一个旧代码，我们无法删除它。好的…我删除了float:left&虚线现在在选项卡上显示正确。然而，当我在安卓平板电脑上访问它时，当我点击按钮时，它只突出显示验证文本，而不是完整按钮。我怎样才能解决这个问题？我不确定，但您可以尝试将样式设置为内联块。您还可以将样式应用于akey_active:active伪类，以便在选中时更改样式。