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>

focus 和 active 在 Firefox 中效果良好，但在 Chrome 和 Safari 中不起作用。

- user687414

---

:focus 就像是 :hover 的键盘状态。当一个元素被聚焦时，它会发生，在你用空格键或回车键“点击”该元素之前。然后它就会变成 :active。 - Benxamin

Answer 1

看起来 Webkit 存在一些聚焦方面的小问题，虽然不算是 bug，但可以轻松通过 HTML 中使用 tabindex 属性来解决。

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

咔嚓声响起...

- shobhonk

---

虽然我欣赏你的创造力，但这对于除了“隐藏”和“显示”UI元素之外的任何东西来说都太粗糙了。我正在寻找特定于输入元素样式的内容，因此与OP不完全相同。尽管如此，我想这也可以工作。 - Luke

Answer 2

这也适用于基于Webkit的'focus'事件，但它无法起作用。解决方法是在A上放置tabindex="0"属性，然后它将接收到焦点事件。您可能还希望至少拥有一个“＃”作为href，以防万一。

- user1040252

---

在Safari 5.0.1上似乎无法正常工作<button>和<input type="button">。 - Fabio Iotti

Answer 3

这是可以解决的，不过需要一些额外的代码...

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

jsfiddle

我知道这很荒谬... 你可以在这里阅读更多

希望这能有所帮助

- calofanas

---

非常感谢calofanas。这对Safari 7.1.5起到了作用！ - apo11oCreed

Answer 4

用户1040252发布的解决方案对我很有帮助。

我有一个包含图像的div，点击时会在span标记中设置一个图像为可见。 火狐浏览器无视了我CSS文件中的类名:focus。

<div class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
    <img src="pictures\\figures\\image_1.JPG"/>

</span>
</div>

我的 CSS（部分）：

.thumbnail_frame:focus span{visibility: visible;}
//...
.thumbnail_frame span
{
    visibility: hidden;
    position: fixed;
    top: 20px;
    left: 20px
}

但这仅适用于Internet Explorer 9。Firefox 12在其他简单示例中也忽略了焦点，例如在此处找到的： 解释： {{link1：http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm}} 试一试： {{link2：http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm}}

但是，像这样添加tabindex =“0”，

<div tabindex="0" class="thumbnail_frame">  
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
    <span>
        <img src="pictures\\figures\\image_1.JPG"/>

    </span>
    </div>

非常好用。一次点击打开隐藏的区域，第二次点击则非常干净地关闭它。

- stack collision with heap

Answer 5

如果一个元素本身不可聚焦，可以使用tabindex="0"使其可聚焦。有关tabindex的更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex。

将tabindex设置为-1会使其无法聚焦。除非您要明确设置选项卡顺序，否则不建议将tabindex设置为正整数，因为它可能会导致可访问性问题。

有关tabindex和可访问性的更多信息，请参见https://webaim.org/techniques/keyboard/tabindex。

- Mel

Answer 6

你应该知道，伪类:focus不适用于A标签。 A标签有四个伪类：:link、:hover、:active、:visited。

- Ismail

---

在所有浏览器中，你可以通过:focus将A标签（带有有效的href）设置为键盘支持。 - Benxamin