css焦点不在safari和chrome工作

Question

我遇到了一个我从未得过的奇怪问题.请看这段代码:

css:

#btn{
    margin-left:150px;
    padding:10px;
    display:block;
}
#btn a{
    padding:5px 20px;
    background:green;
    color:#FFF;
    text-decoration:none;
    outline:none;
}
#btn a:hover{
    background:#933;    
}
#btn a:focus, #btn a:active{
    background:#CF0;
color:#000; 

}

这里是HTML

<div id="btn">
   <a href="#">Click here</a>
</div>

的焦点和活跃在Chrome和Safari Firefox中运作良好的CSS,但不是.

Answer 1

是的,似乎是关注webkit的小问题.不是一个错误.可以在html中轻松修复.只需使用tabindex.

     <a href="#" class="hide" tabindex="1">[hide]</a>
     <a href="#" class="show" tabindex="2">[show]</a>

塔达...

Answer 2

对于基于 Webkit 的“焦点”事件也是如此，它不需要。修复方法是在 A 上放置 tabindex="0" 属性，然后它接收焦点事件。您可能还希望至少有一个“#”作为 href，以防万一。