TAB焦点没有正确显示

tab focus not appearing properly

本文关键字：显示 焦点 TAB      更新时间：2023-09-26

我的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;
}

JS如下:

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

当我点击键盘上的tab键时，它指向其他地方&不完全在确切的按钮上，而只在文本"验证"上。如果你观察其他网站的选项卡，通常它会在按钮的边界上显示虚线，但在我的情况下，它只在文本"verify"

上显示虚线。

如何使我的标签正确地出现在整个按钮上?

谢谢!

CSS中的float:left使span相对于包含它的<a>浮动。由于<a>没有其他内容，它正在崩溃为无，浏览器使其不可表

既然您已经将span设置为inline-block，那么真的没有理由再将其设置为float:left。

就我个人而言，我建议你不要做所有这些图层。你可以只使用<a id="key_verify" href="#">Verify</a>，然后在CSS中完成其余的工作。

为span.verify_span添加display:block

相关文章：